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

Как скачать JSON на JavaScript: метод fetch() #почитать Метод fetch() — это один из ключевых инструментов веб-разработки. Он появился как альтернатива устаревшему XMLHttpRequest и сразу изменил привычный подход к работе с данными в браузере. Сегодня трудно представить приложение без динамической подгрузки: комментарии в соцсетях, бесконечные ленты новостей, онлайн-магазины с фильтрацией товаров — всё это работает благодаря запросам к серверу, которые обрабатываются без перезагрузки страницы. ⏱Читать статью

document.open(), write(), writeln(), close() в браузере: когда можно и когда нельзя #почитать Эти методы управляют потоковой записью HTML прямо в документ. Они удобны во время парсинга страницы, но опасны после загрузки: могут стереть текущее содержимое, блокируют поток, ухудшают производительность и плохо сочетаются с современными практиками. Ниже — безопасные сценарии, риски и актуальные альтернативы. ⏱Читать статью

CSS-градиенты в oklch #почитать Градиент — это плавный переход между двумя или более цветами, создаваемый с помощью функций linear-gradient() или radial-gradient(). Его используют в вебе для фонов, кнопок, рамок, декоративных элементов и даже в интерактивных эффектах при наведении. Классические градиенты в CSS описываются в sRGB — привычном цветовом пространстве браузеров. Но у sRGB есть ограничения: некоторые переходы выглядят тусклыми или неравномерными, особенно если использовать яркие и сложные оттенки. Чтобы добиться более естественного восприятия цвета, в CSS можно использовать современные цветовые модели, например oklch. Эта модель разработана с учётом особенностей человеческого зрения: яркость, насыщенность и оттенок регулируются отдельно, а сами переходы кажутся глазу равномерными. ⏱Читать статью

В чём разница между <p> и <br> #почитать Чтобы разметить текст, нужно понимать, какие использовать теги. Для создания новой строки в тексте есть несколько способов. В статье мы расскажем, как ими пользоваться. ⏱Читать статью

Что такое инкрементальная гидратация в 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 строк). Решил выложить, может, кому‑то пригодится.

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

CSS-медиазапросы без min- и max-. Как работает новый синтаксис и стоит ли переходить? #почитать Разбираем новые возможности CSS Media Queries Level 4 — логические операторы сравнения, которые делают код более читаемым и интуитивным. От (min-width: 768px) and (max-width: 1024px) к простому (768px <= width <= 1024px). Зачем это нужно и как с этим работать? ⏱Читать статью

Little Reminder About Custom Properties with Invalid Values #почитать This is like one of those weirdly difficult quizzes about CSS. If you’ve got a <p> element sitting there in a totally normal basic HTML layout, then this CSS: ⏱Читать статью

Что новенького есть в CSS в 2025 году #почитать

Мне всегда было интересно наблюдать, как развивается CSS. Держу себя в форме, чтобы не пропустить что-то важное. А недавно подумал: «Почему бы не поделиться ими с подписчиками?». И я тут. Составил список новинок, которые мне кажутся важными и интересными. Есть несколько новых возможностей, которые очень сильно изменят CSS. Думаю, лучше готовиться к ним заранее. Также скажу, что на сегодняшний день они реализованы минимальным количеством браузеров. Не получится использовать их прямо сейчас. Хотя некоторые можно, если вы поддерживаете только браузер Google Chrome. В любом случае про браузерную поддержку я тоже расскажу.

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

CSS Anchor Positioning API #почитать Большой обзор нового API для позиционирования элементов в CSS. В статье вы узнаете как теперь без использования библиотек можно создавать tooltip'ы, контекстные меню, индикаторы и другие элементы UI, которым необходима якорная связка. ⏱Читать статью

Нейродизайн: как мозг воспринимает интерфейсы и почему пользователи действуют нелогично #почитать Вы замечали, что пользователи часто игнорируют важные элементы интерфейса или совершают действия, которые кажутся нелогичными? Нейродизайн изучает, как люди на самом деле воспринимают цифровые продукты, а не как нам кажется, что они должны это делать. В этой статье разберём: — Как глаз сканирует страницу и почему 90% информации мозг просто отфильтровывает — 5 когнитивных искажений, которые рушат конверсию (и как их обойти) — Практические приёмы дизайна, основанные на нейронауке ⏱Читать статью

Дружеское знакомство с SVG #почитать SVG – одна из самых интересных технологий браузера. С его помощью можно делать массу полезных и интересных компонентов. Это неотъемлемая часть моего стека. В этой статье я поделюсь основами, чтобы заложить прочный фундамент для дальнейшего развития. Я покажу вам, почему SVG так хорош, и поделюсь фишками, которыми вы сможете пользоваться прямо сейчас. Для понимания этой статьи не требуется специальных знаний и опыта работы с SVG, но предполагается, что вы знакомы с основами HTML/CSS/JS. ⏱Читать статью

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

There’s no such thing as a CSS reset #почитать CSS resets are a technique nearly as long lived as the modern CSS era itself, stretching all the way from the CSS Zen Garden days to inclusion in mass-market current-day tools like Tailwind. Resets are a staple in the CSS toolkit. But here’s the thing; there’s no such thing as a CSS reset. Now, to be clear, I’m not suggesting some kind of long-running mass hallucination. I’m suggesting CSS resets don’t do what the name says. The word “reset” implies an objective default state that you’re restoring to, but the only objective default state is what browsers ship. You cannot “reset” browser styles by addition. Resets are inherently subjective, which means in practice, you are not so much resetting as you are defining default element styles for a website. ⏱Читать статью

Разработка с учетом паттернов WAI ARIA #почитать Сегодня веб-приложения стали сложными интерактивными системами, напоминающими полноценные десктоп приложения. Однако за красивыми интерфейсами и богатым функционалом часто скрывается важный аспект, которому уделяется недостаточно внимания — доступность (accessibility). Для миллионов пользователей с ограниченными возможностями это означает, что они не могут полноценно взаимодействовать с сайтом, выполнить базовые действия или получить информацию. Проблема особенно ярко выражена в современных одностраничных приложениях (SPA), кастомных компонентах, модальных окнах и прочих динамических UI-решениях, которые не учитывают, как с ними будут работать вспомогательные технологии. ⏱Читать статью

Хочешь разбираться в Project Management? Для тебя уже всё сделали. 📌 Канал @projectmanager_it делится полезными секретами и лайфхаками управления проектами и продуктами в IT. Подписывайтесь и прокачивайте свои навыки: @projectmanager_it