Плагин CSS Responsive

Очень полезный плагин для перевода line-height в проценты. Формула для расчёта:

line-height / font size = line-height

🔗 Плагин: ссылка

➡️ @byFrontDeveloper

На данном ресурсе в интерактивном режиме можно посмотреть, как работают свойства CSS3, возможности HTML5, посмотреть поддержку этих возможностей браузерами и сгенерировать необходимый код

Помимо CSS3 и HTML5, есть генераторы для SEO-оптимизации

Все грамотно структурировано, максимально лаконично и интуитивно понятно

🔗 Ссылка: https://webcode.tools/

➡️ @byFrontDeveloper

➡️ @byFrontDeveloper

Хороший ресурс для практики вёрстки

Огромная библиотека UI-задач, которые можно взять и попробовать воссоздать

Полезно, если хочешь держать руку на пульсе и тренировать насмотренность 🫡

https://www.uidesigndaily.com/

➡️ @byFrontDeveloper

В CSS мы можем использовать accent-color для стилизации полей ввода

Браузеры, которые поддерживают accent-color, в настоящее время применяют его к следующим HTML элементам:

<input type="checkbox">
<input type="radio">
<input type="range">
<progress>

🔜 Поддержка свойства составляет 92.67%

➡️ @byFrontDeveloper

Свойство Flex wrap является отличным инструментом для написания отзывчивых веб-страниц без каких-либо медиа-запросов

➡️ @byFrontDeveloper

CSS: float: right;

➡️ @byFrontDeveloper

Как структурировать папки в проекте?

Неважно, используешь ли ты React, Vue, TypeScript или JavaScript.

Существует множество стратегий и мнений по этому поводу. Я расскажу тебе о нескольких интересных вариантах! ↓

1. По типу

Это самый простой и распространенный способ. Подходит для небольших проектов.

Создаешь папку для каждого типа файлов: компоненты, страницы, сервисы, состояния, утилиты...

❌ Минус: со временем в некоторых папках может скопиться слишком много файлов, что затруднит навигацию.

2. По типу и функционалу

Здесь уже отражается логика приложения. Внутри каждой папки указывается, к какой части приложения она относится.

☑ Плюс: становится проще ориентироваться.
❌ Минус: возможное дублирование одних и тех же "фич" в разных папках.

3. Screaming Architecture (Кричащая архитектура)

Здесь подход меняется: вместо того, чтобы указывать, что используется, папки обозначают, что делает приложение.

Наверняка бывало, что ты открываешь проект, сразу видишь, что он на React, но совершенно не понимаешь, чем он занимается.

Идея в том, чтобы поменять этот подход: упростить разработку и сделать так, чтобы независимо от технологии папки сразу указывали на смысловые блоки проекта.

Какая структура лучше? 🤔

Зависит от размера и длительности проекта.

Можно начать с первой стратегии и постепенно переходить на другую.
Также возможны гибридные варианты, сочетающие разные принципы.

➡️ @byFrontDeveloper

Держите полезную CLI-утилиту — npkill, предназначенную для удаления всех папок node_modules в проектах.

Позволяет освободить значительное количество места на диске

Запускаешь команду:

npx npkill

Дальше, просто нажимаешь [Пробел], чтобы удалить те папки, которые больше не используешь

Удобно ещё и то, что она показывает, сколько дней назад была последняя модификация

➡️ @byFrontDeveloper

💡 Полезный совет: используйте Performance Monitor в Chrome DevTools — это помогает анализировать загрузку процессора и использование памяти на сайте!

➡️ @byFrontDeveloper

💡 Не всегда используйте медиазапросы в CSS!

Функция min() позволяет создавать более гибкие макеты.

Она позволяет использовать наименьшее значение из нескольких вариантов

➡️ @byFrontDeveloper

Структура папок в приложении React. На случай, если вам понадобятся идеи:

➡️ @byFrontDeveloper

Лучшие кнопки с темным режимом для вашего сайта!
Для HTML/CSS и React. Скопируйте и вставьте:

→ http://toggles.dev

➡️ @byFrontDeveloper

Чистая архитектура в FrontEnd.

✓ Случаи использования, сервисы, репозитории...
✓ Понимание слоев архитектуры.
✓ Не использовать классы, только функции.
✓ С TypeScript

⏩ читать

➡️ @byFrontDeveloper

Знаете ли вы, что в VSCode можно открыть браузер?

Никаких расширений, никаких установок - он интегрирован!

Ваш код и ваши изменения в одном окне

➡️ @byFrontDeveloper

Из PDF-файла делаем САЙТ-ВИЗИТКУ

Залетаем на self.so

Загружаем своё резюме в PDF — и вуаля, через пару секунд у тебя уже готов мини-сайт.

Бесплатно. Open-source.

Даже код трогать не надо.

➡️ @byFrontDeveloper

Самая крутая анимация, которую когда-либо видели на сайте

Абсолютное безумие 🤯

→ http://nvg8.io

➡️ @byFrontDeveloper

Лучший ресурс для настройки прокрутки вашего сайта!

Изменяйте цвета и размеры полосы прокрутки..

И предоставляет вам готовый CSS для копирования с максимальной поддержкой.

➡️ @byFrontDeveloper

CSS в реальной жизни

➡️ @byFrontDeveloper

НОВОЕ в CSS!

Наконец-то можно анимировать height: auto

Достаточно одной дополнительной строки в коде

➡️ @byFrontDeveloper

То, что появилось в CSS, - это потрясающе!

Создавайте слайдеры с кнопками без написания JavaScript.

С новыми scroll-button и scroll-marker-group

Посмотрите демо и код!

➡️ @byFrontDeveloper