Верстальщик от бога

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

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

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

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

Masonry Layout is Now grid-lanes #почитатьIt's settled! A new CSS display property keyword called grid-lanes will trigger a masonry layout mode.⏱Читать статью

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

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.⏱Читать статью

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

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

JavaScript, отдохни! Делаем интерактивные вещи на HTML и CSS #почитатьА вы интересуетесь современными возможностями CSS и HTML? Может, некоторые из вас думают, что нового там ничего не появится или что свежие фишки не поддерживаются браузерами? Это мнение давно устарело. Современные HTML и CSS позволяют реализовывать интерактивные элементы, которые раньше были доступны только с помощью JavaScript. Можно сказать, что границы между разметкой, стилями и программированием постепенно стираются.На написание этой статьи меня подтолкнуло большое количество новых возможностей в современных HTML и CSS, да и не только современных: некоторые приёмы, о которых знают немногие, поддерживались ещё со времён IE. Многие по привычке используют готовые UI-библиотеки или CSS-фреймворки, опасаясь изучать что-то новое.⏱Читать статью

Почему мы все еще используем SASS в 2025 году #почитатьСегодня хочу поделиться тем, почему мы продолжаем использовать препроцессор SASS/SCSS в наших проектах, несмотря на растущую популярность Tailwind и CSS-in-JS решений.К слову, мы не «олдскульные фанаты» SASS, и Tailwind тоже используем, но в зависимости от типа проекта. Комбинированный подход дает гибкость, особенно в масштабируемых фронтенд-системах.⏱Читать статью

Равномерное размещение блоков разных размеров #почитатьКак‑то на одном проекте понадобилось красиво равномерно разместить небольшие блоки‑виджеты в контейнере на странице. Сложность в том, что эти блоки различаются, как по высоте, так и по ширине. При чём нужно учесть адаптивность вёрстки и динамическое изменение содержимого, как контейнера, так и самих элементов — виджетов. Собственно мои изыскания по этой теме и вылились в разработку собственного решения и эту статью, которые, я надеюсь, будут полезны читателям.⏱Читать статью

Но

Митапы — это, конечно, круто и полезно. Но что может быть лучше открытой дискуссии с коллегами о наболевшем? ☑AvitoTech тут зовёт на классный ивент для фронтендеров. Обещают полтора часа дискуссий на самые разные темы: от роста фронтенд-инженера в тимлида до ванильного JS. И вишенка на торте — афтерпати на веранде ☄Всё пройдёт вечером 19 мая, так что погода не должна подкачать. Регистрация, кстати, по ссылке.

HTML и CSS антипаттерны #почитатьПри обучении разным языкам программирования всегда есть практики, которым не рекомендуется следовать. Это очень сильно помогает разработчикам избегать ошибок.Только по какой-то причине сложно найти антипаттерны по языкам HTML и CSS. Может, потому что они не языки программирования?В общем, у меня появилось желание это исправить. Я собрал несколько примеров, которые лично отношу к антипаттернам. Возможно, это субъективно, но надеюсь, что нет.⏱Читать статью

Scrollytelling on Steroids With Scroll-State Queries #почитатьUnconvinced of the value of scrollytelling? Alright, skeptic, let’s first warm up with some common use cases for scroll-based styling.⏱Читать статью

Как сделать кнопку «Скопировать» на странице #почитатьНаверняка вы сто раз видели кнопку Скопировать, например, возле блоков кода в любимой нейронке, чтобы быстро их скопипастить. Давайте разберемся, как самостоятельно сделать такую же (кнопку, а не нейронку).⏱Читать статью

Как создать плавные анимации в CSS с cubic-bezier() — руководство с примерами #почитатьКогда вы задаёте анимацию или переход в CSS, свойства изменяются нелинейно: сначала медленно, потом быстрее, в конце снова замедляются. Это поведение называется интерполяцией и определяется так называемой функцией ускорения (или «easing function»). По умолчанию браузеры используют значения вроде ease, ease-in, ease-out и linear. Но если вам нужен более тонкий контроль над тем, как именно свойство изменяется во времени, пригодится функция cubic-bezier().⏱Читать статью

Мне этот Chrome DevTools теперь абсолютно понятен #почитатьЕсли вы думаете, что Chrome DevTools нужны только для того, чтобы посмотреть на ошибку в консоли или скопировать путь к элементу, вы используете лишь малую часть их возможностей. На самом деле, это рабочая среда, которая должна быть открыта у фронтенд-разработчика постоянно. С её помощью можно не только искать баги, но и проектировать интерфейсы, тестировать поведение на разных устройствах, анализировать производительность и вносить правки в код прямо из браузера.Этот гайд поможет вам перестать воспринимать DevTools, как панель для отладки и начать использовать их как основной инструмент для ежедневной работы.⏱Читать статью

Creating Scroll-Based Animations in Full view() #почитатьIt’s not that hard to do! Preethi shows you how it's really the same old animation you’re used to writing in CSS, only applied on a view timeline instead of a normal timeline.⏱Читать статью