Делаем интерфейс дружелюбнее. Коллекция простых HTML/CSS лайфхаков
#почитать
Красивый и интуитивно понятный интерфейс — это моя личная страсть. Я тратил дни, чтобы докрутить свои проекты до нужного мне уровня. В итоге я начал систематически собирать приёмы HTML и CSS, которые мгновенно улучшают восприятие пользователя.
Сегодня я решил показать вам несколько проверенных трюков. Выбрал самые лёгкие в освоении, чтобы вы смогли внедрить их уже сегодня, не отвлекаясь на сложности.
⏱ Читать статью
#почитать
Красивый и интуитивно понятный интерфейс — это моя личная страсть. Я тратил дни, чтобы докрутить свои проекты до нужного мне уровня. В итоге я начал систематически собирать приёмы HTML и CSS, которые мгновенно улучшают восприятие пользователя.
Сегодня я решил показать вам несколько проверенных трюков. Выбрал самые лёгкие в освоении, чтобы вы смогли внедрить их уже сегодня, не отвлекаясь на сложности.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
Как совместить утилиты и рукописный CSS в атомарном подходе?
#почитать
В этой статье мы поговорим о том, нормально ли применять в рамках Atomic CSS подхода рукописный CSS. Бытуют разные мнения по этому поводу. Кто-то считает, что в атомарном подходе нужно использовать только утилиты, а кто-то допускает и произвольные сочетания рукописных CSS классов с ними. Я постараюсь разобраться в этом, аргументируя свою позицию.
⏱ Читать статью
#почитать
В этой статье мы поговорим о том, нормально ли применять в рамках Atomic CSS подхода рукописный CSS. Бытуют разные мнения по этому поводу. Кто-то считает, что в атомарном подходе нужно использовать только утилиты, а кто-то допускает и произвольные сочетания рукописных CSS классов с ними. Я постараюсь разобраться в этом, аргументируя свою позицию.
Please open Telegram to view this post
VIEW IN TELEGRAM
Кастомные медиавыражения
#почитать
Что такое кастомные медиавыражения и почему обычные CSS-переменные не работают внутри @media. Простое объяснение, понятные примеры и разбор того, как браузер вычисляет стили под капотом.
⏱ Читать статью
#почитать
Что такое кастомные медиавыражения и почему обычные CSS-переменные не работают внутри @media. Простое объяснение, понятные примеры и разбор того, как браузер вычисляет стили под капотом.
Please open Telegram to view this post
VIEW IN TELEGRAM
CSS-свойство image-orientation: исправляем ориентацию изображений из EXIF
#почитать
При загрузке фотографий со смартфонов или камер на сайтах порой возникает проблема с неправильной ориентацией изображений. Это связано с тем, что устройства сохраняют ориентацию изображения в метаданных EXIF, а браузеры могут не всегда учитывать эти данные при отображении. Свойство CSS image-orientation позволяет корректировать ориентацию изображений, обеспечивая их правильное отображение.
⏱ Читать статью
#почитать
При загрузке фотографий со смартфонов или камер на сайтах порой возникает проблема с неправильной ориентацией изображений. Это связано с тем, что устройства сохраняют ориентацию изображения в метаданных EXIF, а браузеры могут не всегда учитывать эти данные при отображении. Свойство CSS image-orientation позволяет корректировать ориентацию изображений, обеспечивая их правильное отображение.
Please open Telegram to view this post
VIEW IN TELEGRAM
Полупрозрачный бублик, 3D-сапёр и электрорамка: самые интересные CSS-демки
#почитать
Посмотрели за вас в интернете и заботливо отобрали самые интересные демки на CSS и JavaScript.
⏱ Читать статью
#почитать
Посмотрели за вас в интернете и заботливо отобрали самые интересные демки на CSS и JavaScript.
Please open Telegram to view this post
VIEW IN TELEGRAM
Я нанял джуна в свой open source проект. Вот что получилось
#почитать
Здравствуйте, товарищи! Сегодня у нас будет не техническая статья. Я расскажу об одном нестандартном кейсе из своей практики, суть которого отражена в заголовке.
В первой части будет описание моего опыта, а далее обсудим, как можно его перенять. И не просто перенять, а использовать для решения сразу двух проблем в IT-индустрии!
⏱ Читать статью
#почитать
Здравствуйте, товарищи! Сегодня у нас будет не техническая статья. Я расскажу об одном нестандартном кейсе из своей практики, суть которого отражена в заголовке.
В первой части будет описание моего опыта, а далее обсудим, как можно его перенять. И не просто перенять, а использовать для решения сразу двух проблем в IT-индустрии!
Please open Telegram to view this post
VIEW IN TELEGRAM
Прагматичное руководство по современным цветам в CSS
#почитать
Для большинства разработчиков работа с цветами в CSS часто сводится к тому, чтобы просто скопировать значение из файла дизайна и вставить его в редактор. Мы ведь разработчики, а не дизайнеры. Тем не менее, за последние годы в CSS произошло множество изменений, касающихся работы с цветами — от новой синтаксической формы до совсем новых возможностей, которыми могут пользоваться даже те, кто редко занимается дизайном.
Если вы разрабатываете собственные цветовые схемы или хотите глубже понять, как применять теорию цвета прямо в CSS, во второй части статьи я расскажу об этом подробнее. А в этой части я сосредоточусь на том, как новые функции работы с цветом могут помочь именно разработчикам, не углубляющимся в дизайн.
⏱ Читать статью
#почитать
Для большинства разработчиков работа с цветами в CSS часто сводится к тому, чтобы просто скопировать значение из файла дизайна и вставить его в редактор. Мы ведь разработчики, а не дизайнеры. Тем не менее, за последние годы в CSS произошло множество изменений, касающихся работы с цветами — от новой синтаксической формы до совсем новых возможностей, которыми могут пользоваться даже те, кто редко занимается дизайном.
Если вы разрабатываете собственные цветовые схемы или хотите глубже понять, как применять теорию цвета прямо в CSS, во второй части статьи я расскажу об этом подробнее. А в этой части я сосредоточусь на том, как новые функции работы с цветом могут помочь именно разработчикам, не углубляющимся в дизайн.
Please open Telegram to view this post
VIEW IN TELEGRAM
Реактивность без React или как обойтись без id в html элементах
#почитать
А зачем вообще обходиться без id? Даже не знаю, но это вполне возможно, и приложение будет живым и вполне себе «реактивным». А всю «магию» при этом творит функция, которую я назвал tokenize.
Конечно же я, ни в коем случае, не настаиваю на отказе от id. "Элементарные" id никому не мешают и tokenize`у тоже. Но если обходиться без id, то как же получать ссылки на DOM элементы, для обращения к ним? Вот для этого и нужна функция tokenize, которая собирает референсы в удобную структуру с ветками, подветками и листьями (ссылками на DOM элементы). А вот как она это делает, мы с Вами сейчас и разберём.
⏱ Читать статью
#почитать
А зачем вообще обходиться без id? Даже не знаю, но это вполне возможно, и приложение будет живым и вполне себе «реактивным». А всю «магию» при этом творит функция, которую я назвал tokenize.
Конечно же я, ни в коем случае, не настаиваю на отказе от id. "Элементарные" id никому не мешают и tokenize`у тоже. Но если обходиться без id, то как же получать ссылки на DOM элементы, для обращения к ним? Вот для этого и нужна функция tokenize, которая собирает референсы в удобную структуру с ветками, подветками и листьями (ссылками на DOM элементы). А вот как она это делает, мы с Вами сейчас и разберём.
Please open Telegram to view this post
VIEW IN TELEGRAM
Вайбкодерам и Веб-разработчикам на заметку! Список сайтов с готовыми React UI-Компонентами
#почитать
Во многих случаях при разработке веб-сервисов и сайтов возникает необходимость в поиске готовых UI-компонентов — как для вдохновения, так и для ускорения работы над интерфейсом. Подобные решения будут полезны всем, кто занимается веб-дизайном и веб-разработкой.
В статье представлена подборка ресурсов с качественными и интересными UI-компонентами. Список будет дополняться по мере появления действительно достойных сайтов и сервисов.
⏱ Читать статью
#почитать
Во многих случаях при разработке веб-сервисов и сайтов возникает необходимость в поиске готовых UI-компонентов — как для вдохновения, так и для ускорения работы над интерфейсом. Подобные решения будут полезны всем, кто занимается веб-дизайном и веб-разработкой.
В статье представлена подборка ресурсов с качественными и интересными UI-компонентами. Список будет дополняться по мере появления действительно достойных сайтов и сервисов.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
Пропадающая граница в sticky-таблице. Баг CSS-рендеринга, найденный в React-проекте
#почитать
Проблема заключается в том, что в таблице на React с колонками, у которых есть свойство position: sticky, иногда пропадала граница между соседними ячейками по вертикали. Причём проявлялась она не всегда и носит случайный характер. Забавно, что изменение масштаба страницы (Ctrl + колесико мыши) мгновенно возвращает исчезнувший бордер. При этом в CSS все прописано и никуда не исчезает — это чисто визуальный баг рендера.
⏱ Читать статью
#почитать
Проблема заключается в том, что в таблице на React с колонками, у которых есть свойство position: sticky, иногда пропадала граница между соседними ячейками по вертикали. Причём проявлялась она не всегда и носит случайный характер. Забавно, что изменение масштаба страницы (Ctrl + колесико мыши) мгновенно возвращает исчезнувший бордер. При этом в CSS все прописано и никуда не исчезает — это чисто визуальный баг рендера.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1👍1
#посмотреть
— как работать с Cursor
— как формулировать запросы к AI
— как AI пишет код за тебя
— как собрать простой сайт с нуля
— какие ошибки совершают новички
— кому подходит вайбкодинг и кому нет
Please open Telegram to view this post
VIEW IN TELEGRAM
😁5
AI-инструменты уже используют все, но порой в обсуждении с LLM возникает ощущение, что голова полна ответов, но их всё ещё недостаточно, чтобы разрешить вполне себе прикладные вопросы.
Эксперты Podlodka Frontend Crew собрали онлайн-конференцию «Фронтенд с AI», чтобы вместе с практиками из индустрии увидеть, как работает AI в разных аспектах фронтенд-разработки, а главное — сразу начать использовать новые подходы в реальной жизни.
Полная программа — уже на сайте! Формат: пять дней живых Zoom-сессий по утрам и вечерам, закрытое Telegram-комьюнити и много общения со спикерами.
Если хочется не просто читать про AI-тренды, а получить концентрированную порцию знаний именно про AI для фронтенда, присоединяйтесь к сезону.
Вы поймёте, как встроить новые инструменты и подходы в свою работу и найдёте множество единомышленников.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
#посмотреть
Интервью с Сергеем — ветераном IT с 20-летним опытом. Мы говорим о том, как менялось программирование за два десятилетия, как появился БЭМ, почему ИИ уже меняет профессию разработчика и что будет с IT-карьерой в ближайшие годы.
Please open Telegram to view this post
VIEW IN TELEGRAM
#посмотреть
В этом видео мы будем изучать фреймворк Next.js 15 на примере создания проекта "Рецепты татарской кухни" с применением современного стека технологий: HeroUI, Zustand, PostgreSQL, Prisma, Auth.js и Zod.
Пошагово разберем процесс разработки веб-приложения, включая инициализацию проекта, настройку структуры, файловый роутинг, серверные действия, middleware, создание страниц и многое другое
Работать с базой данных будем через Prisma, реализуем авторизацию и регистрацию с Auth.js, а интерфейс под это сделаем на HeroUI
Научимся тестировать проект через Postman и использовать pgAdmin
Будем хранить состояние авторизации и другую логику в Zustand
Решим огромную кучу проблем, пофиксим баги и получим разнообразный опыт
В финале перенесем БД в облачную Prisma Data platform и успешно задиплоим на Vercel!
Please open Telegram to view this post
VIEW IN TELEGRAM
#посмотреть
Гостем является Евгений Пашко – 5 лет коммерческого опыта на Vue.
В этом видео мы покажем вам, как проходит собеседование на FRONTEND разработчика. В ходе интервью разберем вопросы по React, JavaScript, TypeScript, Frontend.
Please open Telegram to view this post
VIEW IN TELEGRAM