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

Улучшение производительности с делегированием событий #почитать Делегирование событий — техника в веб-разработке, используемая для более эффективного управления событиями. Вместо того чтобы добавлять слушателей событий к каждому элементу, можно прикрепить один слушатель к родительскому элементу, повысив эффективность. Этот родительский элемент затем обрабатывает события для всех дочерних элементов и становится более эффективным, как продемонстрировано в статье. ⏱Читать статью

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

HTML элемент search #почитать HTML-элемент search — это контейнер, представляющий части веб-страницы с функциональностью поиска. ⏱Читать статью

Интуитивно понятное объяснение конструкции Async/await в JavaScript #почитать Эта статья написана в расчете на то, что вы уже знакомы с обратными вызовами и промисами, а также имеете базовое представление об асинхронной парадигме в JavaScript. ⏱Читать статью

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

Наиболее эффективные методы улучшения Core Web Vitals #почитать Вопросы производительности могут быть не столь очевидны для тех, чья карьера не была связана с этой областью. Именно поэтому важно понимать, какие оптимизации способны наиболее существенно повлиять на это. На реализацию всех рекомендаций скорее всего просто не будет времени, поэтому важно задать себе вопрос: какие оптимизации принесут максимальную выгоду пользователям? ⏱Читать статью

Жаркий спор по теме Masonry в CSS #почитать CSS получает новый функционал, с помощью которого можно будет создавать сетки по типу Pinterest. Но из-за дебатов между командами WebKit и Chrome релиз задерживается. Решается вопрос о том, как должен выглядеть синтаксис. ⏱Читать статью

Глассморфизм и SVG #почитать

Почти три года назад, когда у компании был еще старый фирменный стиль, мы столкнулись с проблемой экспорта из фигмы изображений в формате SVG. Сложность была с изображениями, где был эффект глассморфизма, он же эффект матового стекла (frosted glass). Недавно чисто из любопытства я решил проверить, починили ли в Figma эту проблему. Проблема осталась. Плагинов так и нет, а гугл не предлагает хороших решений. Поэтому решил выложить эту статью сюда, может, кому пригодится. Дело в том, что при глассморфизме какой-либо элемент иллюстрации делается прозрачным, а часть изображения за этим элементом размывается.

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

Rust vs JavaScript: повышение производительности на 66% с помощью WebAssembly #почитать JavaScript обычно выполняется в одном потоке, который часто называют главным. Это означает, что JavaScript выполняет одну задачу за раз в синхронном режиме. Главный поток также обрабатывает задачи рендеринга — рисование и верстку, — а также взаимодействие с пользователем. Таким образом, длительное выполнение задач JavaScript иногда приводит к тому, что браузер перестает реагировать на запросы. Именно поэтому веб-страницы могут «зависать» при выполнении тяжелых функций JavaScript, блокируя взаимодействие с пользователем. ⏱Читать статью

CSS min() — всё, что нужно #почитать

Victor Ayomipo экспериментирует с CSS функцией min(), исследуя её гибкость с помощью различных единиц измерения, чтобы определить, является ли она абсолютной гарантией отзывчивости. Узнайте, какие предостережения он делает против догматических подходов к веб-дизайну, основываясь на своих выводах.

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

@scope и блоки стилей HTML — это мощное сочетание #почитать Существует так много различных инструментов для написания CSS с ограниченной областью видимости с очень разными взглядами на то, как это делать. Иногда это лишь подфункция инструмента, выполняющего другие задачи. Но, как правило, это концепция, требующая инструментария для реализации. ⏱Читать статью

HTML — язык программирования. Убедите меня в обратном #почитать HTML — самый значимый язык вычислений, программирования или чего-либо еще, из когда-либо созданных. ⏱Читать статью

За хорошим UI следует хороший UX #почитать Когда Google изменила оттенок синего в рекламных ссылках, она получила дополнительный годовой доход в размере 200 миллионов долларов. ⏱Читать статью

Практикум. Загрузка файла с прогресс-баром #почитать Загрузка пользователем файлов на сервер — часто встречающаяся задача при создании сайтов и приложений. Если файлы большие, то хорошей практикой будет показывать пользователю прогресс и результат загрузки файла. Для этого можно использовать прогресс-бар. Организовать полный процесс загрузки файла возможно только с использованием серверной части, реализация которой выходит за рамки данной статьи. Поэтому далее будет рассмотрена организация отправки файла на стороне клиента: HTML-разметка, стилизация элементов и JS-код для передачи файла на сервер. ⏱Читать статью

Как сделать анимацию разными способами: CSS, WebP, Canvas, Lottie, Spine и секвенции #почитать

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

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

Элегантная реализация Long Press обработчика с помощью CSS анимации #почитать В веб-разработке часто возникает необходимость обрабатывать различные типы взаимодействий пользователя, включая короткие и длинные нажатия. В этой статье мы рассмотрим изящный способ реализации обработчиков для этих двух взаимодействий. ⏱Читать статью

😗

Паттерны для эффективного манипулирования DOM с ванильным JavaScript #почитать В руководстве рассматриваются такие шаблоны работы с DOM на JavaScript, как выбор правильного querySelector, кэширование элементов и улучшение обработки событий. ⏱Читать статью

Победители awwwards и их performance в Lighthouse #почитать Все дизайнеры обожают сайт awwwards – площадку с платной публикацией, где собраны самые классные работы в сфере веб-дизайна. А поскольку мы душнилы по части performance, мы собрали почти 5000 сайтов, определили их фреймворк и проверили производительность в Lighthouse. ⏱Читать статью

CSS @import: Плюсы и минусы #почитать Импортирование CSS в каскадный слой. Условный импорт CSS с помощью запросов @supports и медиа запросов. @import vs <link> ⏱Читать статью