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.

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

🔍Тестовое собеседование с руководителем Frontend-разработки в этот четверг

18 июня(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика.

Как это будет:
📂 Виталий Черков, руководитель группы Frontend разработки с опытом 8+ лет, будет задавать реальные вопросы и задачи разработчику-добровольцу
📂 Виталий будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью
📂 В конце можно будет задать любой вопрос Виталию

Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы.

Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot

Реклама.
О рекламодателе.

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

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

AI-инструменты можно любить и ненавидеть, но работать без них в IT уже практически невозможно 🤩

Коллеги из AvitoTech 11 июля зовут в их офис на Лесной на AI Hardcore Day. Приглашают тех, кто каждый день сталкивается с AI в работе и даже пишет своих AI-агентов. Обещают доклады и нетворкинг-сессию на террасе после — и всё это без записи.

💫 Среди тем:
— Spec-Driven Development: теория, инструменты, практика.
— Разработка и тестирование MCP для внутренних агентных систем аналитики.
— Выпрямляем руки агентов: как сделать MCP удобными и действительно полезными.
— Атаки на GenAI-агентов: OWASP на практике.

➡ Регистрация тут!

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

#почитать

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

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