Shadcn для Vue: норм или стрём?

#почитать

Опыт использования shadcn-vue в продакшн проекте: что работает хорошо, а с чем придется помучиться. Честный обзор популярной UI библиотеки от практикующего разработчика.
Стек: Vue/Nuxt 3, Tailwindcss 3, Typescript, Telegram WebApp.

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

Влияние селекторов CSS на скорость рендеринга web-приложения

#почитать

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

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

Все, что вам нужно знать об организации контента в Drupal

#почитать

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

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

Коллекция полезных CSS фишек, которые вы редко используете

#почитать

В мире фронтенда активно всё меняется. Появляются одни инструменты, но только их выучишь — они устаревают, и нужно уже учить новые. Новые методы и API в JavaScript. Даже в HTML появляется что-то новое. И, конечно, CSS не отстаёт.
В общем не удивительно, что люди забывают или не успевают услышать о возможностях в CSS. В этой статье я постараюсь показать несколько из их, которые считаю полезными.

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

HTML мёртв, да здравствует HTML

#почитать

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

Энтузиасты будут говорить вам, что доступ к нативным веб-API через WASM — это решённая задача, достаточно лишь минимального клея JS.
Но никто не задаёт вопрос, зачем нам вообще нужно получать доступ к DOM. Это лишь один из вариантов. В этой статье мне бы хотелось объяснить, почему уже настало время отправить DOM и всевозможные API на радугу, а также поделиться некоторыми идеями о том, как это сделать.
Не буду притворяться, что знаю о браузерах всё. Сегодня уже никто не знает всего, в этом-то и проблема.

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

Делаем интерфейс дружелюбнее. Коллекция простых HTML/CSS лайфхаков

#почитать

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

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

Как совместить утилиты и рукописный CSS в атомарном подходе?

#почитать

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

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

Кастомные медиавыражения

#почитать

Что такое кастомные медиавыражения и почему обычные CSS-переменные не работают внутри @media. Простое объяснение, понятные примеры и разбор того, как браузер вычисляет стили под капотом.

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

CSS-свойство image-orientation: исправляем ориентацию изображений из EXIF

#почитать

При загрузке фотографий со смартфонов или камер на сайтах порой возникает проблема с неправильной ориентацией изображений. Это связано с тем, что устройства сохраняют ориентацию изображения в метаданных EXIF, а браузеры могут не всегда учитывать эти данные при отображении. Свойство CSS image-orientation позволяет корректировать ориентацию изображений, обеспечивая их правильное отображение.

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

Полупрозрачный бублик, 3D-сапёр и электрорамка: самые интересные CSS-демки

#почитать

Посмотрели за вас в интернете и заботливо отобрали самые интересные демки на CSS и JavaScript.

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

Я нанял джуна в свой open source проект. Вот что получилось

#почитать

Здравствуйте, товарищи! Сегодня у нас будет не техническая статья. Я расскажу об одном нестандартном кейсе из своей практики, суть которого отражена в заголовке.
В первой части будет описание моего опыта, а далее обсудим, как можно его перенять. И не просто перенять, а использовать для решения сразу двух проблем в IT-индустрии!

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

Прагматичное руководство по современным цветам в CSS

#почитать

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

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

Реактивность без React или как обойтись без id в html элементах

#почитать

А зачем вообще обходиться без id? Даже не знаю, но это вполне возможно, и приложение будет живым и вполне себе «реактивным». А всю «магию» при этом творит функция, которую я назвал tokenize.
Конечно же я, ни в коем случае, не настаиваю на отказе от id. "Элементарные" id никому не мешают и tokenize`у тоже. Но если обходиться без id, то как же получать ссылки на DOM элементы, для обращения к ним? Вот для этого и нужна функция tokenize, которая собирает референсы в удобную структуру с ветками, подветками и листьями (ссылками на DOM элементы). А вот как она это делает, мы с Вами сейчас и разберём.

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

Вайбкодерам и Веб-разработчикам на заметку! Список сайтов с готовыми React UI-Компонентами

#почитать

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

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

Пропадающая граница в sticky-таблице. Баг CSS-рендеринга, найденный в React-проекте

#почитать

Проблема заключается в том, что в таблице на React с колонками, у которых есть свойство position: sticky, иногда пропадала граница между соседними ячейками по вертикали. Причём проявлялась она не всегда и носит случайный характер. Забавно, что изменение масштаба страницы (Ctrl + колесико мыши) мгновенно возвращает исчезнувший бордер. При этом в CSS все прописано и никуда не исчезает — это чисто визуальный баг рендера.

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