Верстальщик от бога
12.1K subscribers
1.29K photos
17 videos
1 file
1.56K links
Регистрация в перечне РКН:
https://knd.gov.ru/license?id=6757e1989d804a279b283165&registryType=bloggersPermission

Самый большой канал по верстке в телеграм.

Чат верстальщиков: @godinhtmlchat

По всем вопросам: @godinmedia
Download Telegram
Победители awwwards и их performance в Lighthouse

#почитать

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

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🎉8
Паттерны для эффективного манипулирования DOM с ванильным JavaScript

#почитать

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

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
😗
7😱4🙈2👎1
Элегантная реализация Long Press обработчика с помощью CSS анимации

#почитать

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

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6👍4👏1
Как сделать анимацию разными способами: CSS, WebP, Canvas, Lottie, Spine и секвенции

#почитать

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


Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
Практикум. Загрузка файла с прогресс-баром

#почитать

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

Организовать полный процесс загрузки файла возможно только с использованием серверной части, реализация которой выходит за рамки данной статьи. Поэтому далее будет рассмотрена организация отправки файла на стороне клиента: HTML-разметка, стилизация элементов и JS-код для передачи файла на сервер.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7🎉2👍1
За хорошим UI следует хороший UX

#почитать

Когда Google изменила оттенок синего в рекламных ссылках, она получила дополнительный годовой доход в размере 200 миллионов долларов.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
6🤔2🔥1
HTML — язык программирования. Убедите меня в обратном

#почитать

HTML — самый значимый язык вычислений, программирования или чего-либо еще, из когда-либо созданных.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10😁2
@scope и блоки стилей HTML — это мощное сочетание

#почитать

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

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6👏31👍1
CSS min() — всё, что нужно

#почитать

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


Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍61🔥1
Rust vs JavaScript: повышение производительности на 66% с помощью WebAssembly

#почитать

JavaScript обычно выполняется в одном потоке, который часто называют главным. Это означает, что JavaScript выполняет одну задачу за раз в синхронном режиме. Главный поток также обрабатывает задачи рендеринга — рисование и верстку, — а также взаимодействие с пользователем. Таким образом, длительное выполнение задач JavaScript иногда приводит к тому, что браузер перестает реагировать на запросы. Именно поэтому веб-страницы могут «зависать» при выполнении тяжелых функций JavaScript, блокируя взаимодействие с пользователем.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
Глассморфизм и SVG

#почитать

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

Недавно чисто из любопытства я решил проверить, починили ли в Figma эту проблему. Проблема осталась. Плагинов так и нет, а гугл не предлагает хороших решений. Поэтому решил выложить эту статью сюда, может, кому пригодится.

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


Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👍1
Жаркий спор по теме Masonry в CSS

#почитать

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

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
😁6🤔2🔥1
Наиболее эффективные методы улучшения Core Web Vitals

#почитать

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

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔5🔥1
Как создавать многошаговые формы с помощью Vanilla JavaScript и CSS

#почитать

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

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
Интуитивно понятное объяснение конструкции Async/await в JavaScript

#почитать

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

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥31
HTML элемент search

#почитать

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

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
Практикум. 6 способов выровнять блок по центру по вертикали и горизонтали

#почитать

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

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
😁6👍3
Улучшение производительности с делегированием событий

#почитать

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

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
Uncaught TypeError: Cannot read property of undefined

#почитать

Эта ошибка возникает, когда вы пытаетесь получить доступ к свойству объекта, который в данный момент имеет значение undefined.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4👍1
Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: «Какие знаешь псевдо-классы?»

#почитать

Недавно у меня появилось желание снова проверить себя и показать сообществу свои ответы на самые популярные вопросы по вёрстке. Может же быть так, что мои ответы были неполными или некорректными. Если это так, то я научусь новому. А если всё хорошо, то они помогут другим людям в подготовке к собеседованию. Кажется, это в любом случае будет полезно.


Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1