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

Пропадающая граница в sticky-таблице. Баг CSS-рендеринга, найденный в React-проекте #почитатьПроблема заключается в том, что в таблице на React с колонками, у которых есть свойство position: sticky, иногда пропадала граница между соседними ячейками по вертикали. Причём проявлялась она не всегда и но...

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

Реактивность без React или как обойтись без id в html элементах #почитатьА зачем вообще обходиться без id? Даже не знаю, но это вполне возможно, и приложение будет живым и вполне себе «реактивным». А всю «магию» при этом творит функция, которую я назвал tokenize.Конечно же я, ни в коем случае, не на...

Прагматичное руководство по современным цветам в CSS #почитатьДля большинства разработчиков работа с цветами в CSS часто сводится к тому, чтобы просто скопировать значение из файла дизайна и вставить его в редактор. Мы ведь разработчики, а не дизайнеры. Тем не менее, за последние годы в CSS произошл...

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

Полупрозрачный бублик, 3D-сапёр и электрорамка: самые интересные CSS-демки #почитатьПосмотрели за вас в интернете и заботливо отобрали самые интересные демки на CSS и JavaScript.⏱Читать статью

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

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

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

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

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

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