➡️ @byFrontDeveloper

Если вы только начинаете изучать веб-разработку, этот курс для вас.

Вы создадите погодное приложение, которое будет отображать данные о погоде в реальном времени и прогноз на 7 дней.

Вы будете использовать фреймворк Next.js, Tailwind CSS для стилей и TypeScript для добавления сильной типизации.

⏩Ссылка тут

➡️ @byFrontDeveloper

BFE.dev — это платформа для отработки навыков разработки, а также отличный ресурс для подготовки к собеседованию на должность frontend-разарботчика

⛓ Ссылка: https://bigfrontend.dev/

➡️ @byFrontDeveloper

Не можете подобрать шрифты и цвета для сайта?

Я нашёл классный ресурс — Colors & Fonts. Тут всё, что нужно, чтобы подобрать идеальные палитры, шрифты и даже сгенерировать градиенты или проверять контрастность

Всё просто и удобно, буквально в пару кликов создашь уникальный стиль для своего проекта

👉 Зацените сами: https://www.colorsandfonts.com/

➡️ @byFrontDeveloper

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

Полезно для веб-разработчиков и дизайнеров, которые стремятся к пиксельному совершенству в своих макетах ✌️

➡️ @byFrontDeveloper

Плагин 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