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

Создали сайт, чтобы вам не пришлось 😊 Представляем готовую инновационную платформу для запуска сайта — Аспро: Приорити 2.0. На ней пользователи могут показать экспертность, собирать заявки и получать оплату. Только для подписчиков канала «Верстальщик от Бога» дарим скидку 20% по промокоду: VERSTKA20. Реклама. ООО "Аспро", ИНН 7453223946, erid: LjN8KKRBR

10 непопуляризованных UI-элементов, улучшающих взаимодействие #почитать 1. Микроинтеракции для Форм Обратной Связи 2. Персонализированные Тултипы 3. Индикаторы Прогресса для Длинных Форм 4. Гибкие Фильтры Контента 5. Ленивая Загрузка с Анимацией 6. Плавающие Кнопки Действия (Floating Action Buttons) 7. Кастомные Скроллбары 8. Интерактивные Иллюстрации 9. Свайп-карусели в Веб-Дизайне 10. Коллапсируемые Секции Контента (Accordion) ⏱Читать статью

Пятница. Аргументы против самозакрывающихся тегов в HTML #почитать

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

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

«Всё — прямоугольник». Блочная модель #почитать Каждый элемент на веб-странице — это прямоугольник, к которому во время отрисовки браузеры применяют CSS-свойства. Чтобы конечные размеры элементов не были для вас сюрпризом и вы точно понимали, из чего они складываются, нужно разобраться с одной из основных концепций вёрстки — блочной моделью. ⏱Читать статью

Потрясающий CSS Easing - новая функция linear() #почитать

"Лучшая анимация - это та, которая остается в тени". Одна из самых важных концепций моушн дизайна в вебе - сделать так, чтобы моушн "чувствовался правильно". В то же время CSS был довольно ограничен в создании анимации и переходов, которые выглядят естественно и ненавязчиво для пользователя. К счастью, ситуация меняется. Сегодня мы рассмотрим новые возможности анимации, появившиеся в CSS. В частности, я хочу продемонстрировать супер возможности linear() - новой функции для анимации, которая в настоящее время определена в спецификации CSS Easing Level 2 в редакции Editor's Draft. Вместе мы изучим ее способность создавать кастомные кривые анимации.

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

Псевдокласс :focus #почитать Псевдокласс :focus в CSS используется для стилизации элементов, которые получили фокус. Это может быть, например, текстовое поле в форме, к которому пользователь переместил курсор для ввода, или ссылка, выбранная через клавиатурный ввод. Псевдокласс :focus позволяет создать более интерактивный и доступный пользовательский интерфейс, подсвечивая активные или выбранные элементы. ⏱Читать статью

Тренды в сфере графического дизайна #почитать ▫️Минимализм и визуальная чистота ▫️Типографика как основной элемент ▫️Смешение классического и цифрового искусства ▫️Мультикультурный и инклюзивный дизайн ▫️3D и AR ▫️Дупликатор (Risograph) ▫️Антидизайн ▫️Работа с сервисом подписки ▫️Бренд-спринты ▫️Кинетическая идентичность все еще набирает популярность ▫️Абстрактная геометрия ▫️Схематическое представление ▫️Экологическая ориентация ⏱Читать статью

Рендерим таблицы с помощью Symbiote.js #почитать Symbiote.js - это библиотека для создания интерфейсных компонентов любой сложности, основанная на стандарте Custom Elements. Каждый созданный вами компонент - это полноправный DOM-элемент, со своим собственным API, который будет доступен через самые обычные селекторы и может быть использован совместно с, практически, любым набором веб-технологий. Он полный агностик, и будет дружить как с вашими фронтенд-либами, так и с любым подходом по созданию HTML-документов на сервере. ⏱Читать статью

Применение ключевого слова revert-layer в CSS #почитать В веб-разработке не так просто добиться идеально масштабируемого дизайна для разных браузеров и устройств. Трудности могут возникать везде: от настройки стиля для экранов разных устройств до переопределения стилей, попавших в наш код неизвестно откуда. Распространённая причина переопределения стилей — это конфликты специфичности. В этом случае можно просто добавить в стиль свойство !important, повысив его приоритет по сравнению с остальными стилями. ⏱Читать статью

Нельзя предполагать, что все используют UTF-8 #почитать

Может показаться логичным, что если вы экспортируете лист Excel в файл csv в последней версии MS Excel, то получите UTF-8. Ну, или, возможно, UTF-16. Но вы ошибётесь. По умолчанию, в большинстве конфигураций Excel сохраняет CSV в кодировке Win-1252.

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

Гибкая вёрстка под большие экраны #почитать Для экранов свыше 1921 пикселей. ⏱Читать статью

Мы забываем основы фронтенд-разработки #почитать

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

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

Исследование переноса текста и слов #почитать О различных способах управления переноса текста на веб-странице. CSS даёт множество инструментов, позволяющих сделать текст таким, каким мы хотим его видеть. Также рассмотрим трюки с использованием HTML и спецсимволов. ⏱Читать статью

10 CSS-однострочников для преобразования веб-приложения #почитать CSS позволяет создавать красивые и отзывчивые веб-дизайны. Однако написание кода CSS может отнимать много времени и сил, особенно если вы не знакомы с новейшими методиками и лучшими практиками. К счастью, есть несколько однострочников, помогающих оптимизировать CSS-код и создавать более эффективные проекты. 1. Центрирование div 2. Создание свободно перемещающихся элементов 3. Позиционирование элементов в любом месте DOM 4. Универсальное свойство box-sizing 5. Адаптивные изображения 6. Центрирование элементов 7. Создание пользовательских стилей флажков 8. Выравнивание текста 9. Очистка float-элементов 10. Сброс всех стилей ⏱Читать статью

Изменить цвета и кнопки сервиса — и не сломать дизайн-систему #почитать

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

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

Почему AVIF вместо JPEG, WebP, PNG и GIF #почитать

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

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

"Заявляю: Мы, как цивилизация, разучились использовать центрирование" #почитать

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

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

Анимация в веб-интерфейсе, влияние на UX #почитать

Любое движение в визуале триггерит пользователей лучше. По данным, Engagement Rate у видео и анимаций в 2 раза выше, в сравнении со статикой.

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

😙