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

От CSS до Canvas и звука: анимируем что угодно с GSAP #почитать GSAP – одна из самых популярных JavaScript-библиотек для создания анимаций. Её используют как новички, так и опытные front-end-разработчики. В этой статье я хочу рассмотреть несколько примеров ее применения – от самых простых до менее очевидных. ⏱Читать статью

Делаем фронтенд-сборку для верстки HTML-писем на MJML #почитать В одном из проектов мы столкнулись с необходимостью упростить процесс верстки и тестирования HTML-писем. В итоге решили вынести шаблоны в отдельный репозиторий и собирать их с помощью MJML. В статье разберём два ключевых этапа: сначала создадим репозиторий для верстки писем, а затем настроим локальную тестовую отправку через SMTP. ⏱Читать статью

Введение в управляемую прокруткой CSS анимацию - Прогресс просмотра #почитать Прошло 10 лет с тех пор, как в спецификации были представлены анимации, управляемые прокруткой, и после пяти лет разработки мы наконец-то начинаем видеть их на веб-сайтах. Есть рассказываемые истории и игры-лабиринты, а также трехмерные интерфейсы, как в iTunes, и 3D-вращение… Но что именно здесь нового? Не то чтобы мы раньше не видели анимаций, работающих от прокрутки, но то, что мы имеем сейчас, не требует ни JavaScript, ни сторонних библиотек - только чистый CSS. И при том эти анимации запускаются в основном потоке, обеспечивая плавную работу с высокой производительностью и ускорением на графическом процессоре. Начиная с декабря 2024 года вы можете безопасно использовать анимацию, работающую при прокрутке, в браузерах Chrome. Firefox тоже поддерживает её, но вам нужно будет установить соответствующий флаг. А как Safari? Пока нет, но не волнуйтесь - вы всё равно можете обеспечить бесперебойную работу такой анимации во всех браузерах с помощью полифилла. Просто имейте в виду, что для работы полифилла требуется библиотека JavaScript, поэтому у вас не будет все работать также быстро. В этой статье мы рассмотрим последнюю опубликованную спецификацию W3C и изучим два типа анимаций, работающих от прокрутки, - анимация прокрутки и анимация просмотра. К концу статьи я надеюсь, что вы будете знакомы с обеими типами анимаций и сможете не только отличать их друг от друга, но и уверенно использовать в своей работе. ⏱Читать статью

Как я сделал игру для Яндекс Игр #почитать Вчера я выпустил свою первую публичную игру «Дом до небес». Это простая в которой нужно ставить блоки этажей, чем ровнее тем лучше, этому мешает раскачивающийся крюк, и шатающееся здание. Игра похожая на ту, в которую я играл в детстве, когда телефоны ещё были кнопочными. ⏱Читать статью

Что такое инкрементальная гидратация в Angular #почитать Если вы когда-либо запускали SSR в Angular, вы наверняка сталкивались с этим парадоксом: страница вроде бы загружается молниеносно, но ощущается медленной. Контент есть, кнопки на месте — а кликаешь по ним, и в ответ тишина. Почему? Потому что браузер всё ещё «оживляет» интерфейс — запускает JavaScript, подключает обработчики, восстанавливает состояние. Это и есть гидратация, и в классическом исполнении она не так уж и быстра. ⏱Читать статью

Три гуру веб-дизайна 90-х #почитать С ростом популярности в 1997 году технологий Flash и CSS возникло три философии веб-дизайна. Дэвид Сигел продвигал «хаки», Джейкоб Нильсен стремился к простоте, а Джеффри Зельдман комбинировал элегантность с удобством пользования. Как и многие из первой волны веб-дизайнеров, Джеффри Зельдман, которому в начале 1997 года исполнилось 42 года, начинал свою карьеру в совершенно другой профессии. Изначально он был автором художественных книг, недолго поработал журналистом, пробовал себя в качестве разъездного музыканта, а потом десять лет посвятил рекламному бизнесу. «Сочинение текстов билбордов с цепляющей графикой — хорошая практика для веба, потому что в нём нужно доносить информацию мгновенно», — рассказывал он позже в интервью. Творческих людей наподобие Зельдмана привлекло в веб развитие мультимедиа; сам он создал свой первый веб-сайт в 1995 году. «Благодаря гипертексту появился веб, благодаря графике он стал игровой площадкой для потребителей», — писал он на своём личном веб-сайте в конце 1996 года. ⏱Читать статью

Как анимировать CSS Grids без JavaScript #почитать Grid Layout — одна из самых зрелых технологий в CSS. Он давно решает задачи макета гораздо лучше, чем float, flex и position. Но долгое время у него была одна неочевидная граница: анимация размеров сетки. Да, grid-template-columns и grid-template-rows существовали с самого начала появления гридов. Да, они были мощными. Но плавно менять их было нельзя — браузеры просто прыгали между состояниями. Анимация сетки оставалась мечтой. Ситуация изменилась c 27 апреля 2025 года. Анимация grid-template-columns и grid-template-rows вошла в baseline — это означает, что теперь она официально поддерживается всеми современными браузерами. Без флагов. Без хака с display: contents. Просто работает. ⏱Читать статью

Понимание CSS corner-shape и сила суперэллипса #почитать Свойство CSS corner-shape — это одно из самых захватывающих нововведений в геометрический инструментарий веб-дизайна за последние годы. Оно расширяет наши возможности по управлению внешним видом углов, выходя за рамки привычных скруглений с помощью border-radius. Это на первый взгляд небольшое дополнение открывает целый мир новых возможностей, которые раньше требовали сложных реализаций на основе SVG или решений с использованием изображений. ⏱Читать статью

4 JavaScript-фреймворка популярных в 2025 году #почитать JavaScript является одним из наиболее востребованных языков программирования, и вокруг него сформировалось множество активных сообществ, которые поддерживают обучение и развитие в рамках его разнообразных фреймворков. JavaScript отличается высокой скоростью работы и легкостью масштабирования, и с конца 2000-х годов он активно применяется для создания как серверных, так и клиентских систем. Для того чтобы свободно владеть языком интернета, крайне важно быть знакомым с JavaScript. ⏱Читать статью

Скриншоты сайта в адаптивную Tailwind верстку #почитать

Я знаю, что существует 100 500 способов перекинуть картинку в готовую вёрстку. Но когда у меня дошло до дела, результат оказался так себе. То ли я криворукий, то ли все эти инструменты ещё далеки от совершенства. В итоге понял, что мне проще накидать свой собственный велосипед — скрипт на Python (~200 строк). Решил выложить, может, кому‑то пригодится.

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