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

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

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

По всем вопросам: @anothertechrock
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👏3❤1👍1
CSS min() — всё, что нужно

#почитать

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


⏱Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6❤1🔥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🔥3❤1
HTML элемент search

#почитать

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

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

#почитать

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

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

#почитать

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

⏱Читать статью
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