Верстальщик от бога
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
@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
Display:none по таймауту

#почитать

Допустим, у нас есть блок (скажем, бутстраповская ячейка <div class="col-12">) и мы хотим её схлопывать (скажем, по клику на кнопке).

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥1
HTML элемент details: Встроенный аккордеон, который вы не используете

#почитать

Узнайте, как HTML элемент <details> может заменить JavaScript аккордеоны и почему он может быть лучше, чем ваше текущее решение.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🤬2🔥1
CSS content-visibility: Улучшение производительности веб-сайтов

#почитать

CSS свойство content-visibility откладывает рендеринг элемента, включая компоновку и отрисовку, до тех пор, пока он не понадобится

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍71
Ключевое слово stretch: лучшая альтернатива width: 100% в CSS

#почитать

Используйте margin, избегая переполнения и горизонтальных полос прокрутки с width: stretch

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍51🔥1👏1
Лучшие курсы графического дизайна

#почитать

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

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
5
Маленький треугольник во всплывающей подсказке

#почитать

Подсказки - это как домашняя еда: все ими пользуются, и у каждого есть свой рецепт их приготовления. Если вы не помните конкретный рецепт, вы ищете его, следуете ему и продолжаете свой день. Эта концепция "много способов сделать одно и то же" является общей для веб-разработки и программирования (и жизни!), но она особенно актуальна для всплывающих подсказок. Не существует специализированного способа их создания - и на данный момент он не нужен, - поэтому люди придумывают разные способы заполнить эти пробелы.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
Ошибки при работе с tailwindcss

#почитать

Во первых, модификатор !important чтобы перебить другие классы (стили).

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍51🔥1
Как сделать один плагин сразу для всех сборщиков фронтенда

#почитать

Обсудим разработку плагинов для сборщиков, таких как: Webpack, Vite, esbuild и подобных. За основу мы возьмем Unplugin.


Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
4