Archakov Blog
Archakov Blog - это Telegram-канал, который предлагает свежие и полезные материалы о разработке веб-приложений с использованием Vue.js, JavaScript и React. Здесь вы найдете обзоры новых функций и инструментов, примеры кода, советы и рекомендации от опытных разработчиков. Если вы хотите быть в курсе последних тенденций в мире фронтенд-разработки и узнать, как максимально эффективно использовать Vue.js, JavaScript и React, подписывайтесь на Archakov Блог в Telegram!
Сircular Dependencies или «ахиллесова пята» Fast Refresh'а в Vite/Webpack
Начнём с главного вопроса: "Что за циркулар депенденциес?"
Циркулар депенденциес или «циклические зависимости» — это когда вам пофиг на то, откуда и как вы импортируете JS/TS файлы из-за чего у вас ломается быстрая перезагрузка (fast refresh), замедляется проверка типизации или JavaScript heap out of memory
С вероятностью в 78.1337% уверен, что и в вашем проекте есть циклические зависимости.
Объясню на примере, как это чаще всего происходит.
Представим, что у нас есть 3 модуля:A.ts
B.ts
C.ts
И если модули импортируются как-нибудь так:A -> B -> C -> AA -> B -> A B -> C -> A -> BC -> B -> A -> C
То тут и происходит Circular Dependencies. Как понять, что за вами пришёл киркуляр депенденси?
Первый симптом — при изменении даже одной буквы в коде, страница полностью перезагружается (сломался Fast Refresh).
Как предотвратить это? 🤔
Советую заранее установить плагин для Vite / Webpack, который будет информировать о циклических зависимостях.
Или использовать утилиту madge (см. скрин 4), которая умеет делать то же самое, только не привязана к сборщикам.
На скриншотах я примерно объяснил, как это фиксится. Но, советую чекнуть ещё это видео у Синяка, где очень круто объясняется что такое Circular Dependencies
CSS-in-JS — зло!
Заметил, что в последнее время начала хайпиться библиотека StyleX от Meta (Facebook), которая, якобы, "облегчает разработку стилей". Триггерит, особенно, когда это заявляют опытные разработчики в своих туториалах.
Почему фронтендеры вечно усложняют себе жизнь всяким шлаком, типа: StyleX, vanilla-extract, styled components и т.п.
Когда это:
stylex.create({
text: {
color: 'red'
}
})Стало лучше/проще этого?
.text { color: red }Как же это тупо писать JS-код в виде CSS в TS файлах, чтобы в итоговом бандле получать СSS-файл, но еще и с уродскими классами
x1jchvi3 x1p7i66b x1xmf6yo Конечно, нам же и так не хватало боли с этим TypeScript, так мы его еще и в CSS должны запихать, чтобы нам еще хуже жилось
И почему-то эта шиза в основном у React-разработчиков
Да, есть отбитые и в других фреймворках, которые пытаются скрещивать CSS-in-JS с Vue/Angular, но чаще это переходит все в deprecated.
За всю мою карьеру в коммерческих проектах, эксперименты с этими CSS-in-JS либами приводили к тому, что в итоге от них отказывались в пользу SCSS-модулей.
А кто ещё до сих пор не отказался, скорее всего ленится это делать или просто больной на голову шизофреник на уровне любителей пиццы с ананасом.
Пожалуйста, прекратите заставлять JS выполнять ваши больные фантазии. Пусть JS делает свою задачу и CSS свою, как это было задумано изначально
Опубликовал на канал новое видео по Vue 3 для начинающих, где будем разрабатывать Vue Sneakers 🔥
Буду благодарен за лайк и комменты, так как именно ваша активность поднимает канал и мотивирует к новому контенту. Так што, всё зависит от вас 👀
💾 Ссылка на исходник: https://github.com/Archakov06/vue-sneakers
🎨 Figma-дизайн: https://www.figma.com/file/fw0toTyXMwM1y4WIe0YFrJ/React-Sneakers
🎉 Как задеплоить Vue Sneakers: https://youtu.be/dnfdrvuHFks
👟 Ссылка на JSON-товаров: https://604781a0efa572c1.mokky.dev/items
Уже прошёл месяц с последнего анонса курса по Vue 3 для начинающих 🫠 и наконец-то я его доделал.
Опубликовал его пока в Boosty, чтобы вы оценили этот курс и оставили замечания если есть, перед тем, как я его залью на основной канал. Нужно еще дозаписать часть по деплою.
Если не будет каких-то замечаний и в целом ок, то залью на канал
Видео длится 7 часов 30 минут 👀
Я давно искал курс, где мне объяснили бы вью и показали как сделать хотя бы более-менее нормальное приложение, а не всякие тудушки.
И в этом курсе мы не просто будем изучать Vue, но и разрабатывать приложение с роутингом, запросами на бэк, передачей данных между приложением, анимациями, изучим что такое Composition API / Options API и т.д.
Курс предназначен для НАЧИНАЮЩИХ 👨🏻🎓, кто не знаком с Vue. Для ноченающех! Не для тру фронтенд девелоперов с опытом в 150 лет и познавших вселенную фронтенда, а для простых смертных.
По стэку и остальному объяснил всё в Boosty. Через неделю опубликую сюда и в основной канал.
Boosty.to
Archakov Blog - exclusive content on BoostyExclusive content from Archakov Blog, sign up and get access!
Карл, ты тут? Я жыв и пилю уже новый контент 👀
Брал временно паузу по ютубе, был загружен работой и небольшим выгоранием по контенту, из-за чего было лень записывать что-то новое.
Сейчас готовлю материалы для нового контента по Vue 3 + TailwindCSS (скоро объясню почему вы должны изучить вью)
Начну заходить с кайфовой вьюшки 🔥 и потом уже буду разбавлять контент Flutter'ом (который готов уже на 60%) и NextJS. План сейчас такой, если вдруг не минуснусь
Пока я готовлю новый контент, покидайте в комментариях ваших идей, какой стэк технологий вы хотите видеть в новых уроках или какой проект можем запилить?
Забыл на трансляции объявить победителей по конкурсу, пока отвечал на ваши вопросы.
В последнее время что-то загружен сильно, удалось только сейчас записать это видео, в котором объявляю 4 победителей, вместо обещанных 3.
Список победителей можно посмотреть в конце видео.
Спасибо всем за крутые идеи 🔥
Какие-то уже реализовал, какие-то буду реализовывать постепенно.
Video is too big
https://youtube.com/live/K_LRWqptGic?feature=share
Выше есть инфа, что будем обсуждать.
(эфир будет сохранен на 3 дня)
YouTube
#ВечернийСтрим / МОЙ НОВЫЙ ПРОЕКТ / ПОИСК РАБОТЫ / ЮЗАЕМ CHAT GPT 4 / Вопросы-Ответы + КОНКУРС❤️ Ссылка для донатов:
— Донаты: https://www.donationalerts.com/r/archakov_blog
— Patreon: https://www.patreon.com/archakovblog
Запускаю новую рубрику "#ВечернийСтрим". Где я буду рассказывать про новости моего канала или что-то из IT.
🔗 Следите за обновлениями…
Итак! Я до сих пор ещё жыв и наконец-то возвращаюсь сюда с неплохими новостями.
1. Сегодня в 19:00 (МСК)
— шо там по новым трендам во фронтенде/бэкенде
— выберем победителя из последнего конкурса
— узнаем как дела сегодня по поиску работы (спойлер: все печально)
— поюзаем подписку ChatGPT 4, которую купил недавно и скоро лишит меня работы
2. НАКОНЕЦ-ТО я допилил большую часть функционала своего нового проекта, который заменит mockapi в моих уроках и покажу его сегодня на трансляции.
Проект сделан с душой и с огромным кайфом
Кстати, проект уже запущен в бета-тестирование и ссылку можно найти на бусти. До тех пор, пока проект в бете, доступ к регистрации будет только у первых 50 пользователей.
Давно так не кайфовал от разработки пет-проекта, как от этого. Я пока забил на ютуб, ибо всё свободное время трачу на этот сервис.
Мотвация — запилить новый курс на VueJS или ReactJS (пока ещё думаю юзать вью или нет) с использованием уже моего сервиса, а не MockAPI
На следующей неделе планирую провести разговорный стрим на разные темы, давно мы не общались + покажу на трансляции этот проект и какие крутые фичи я реализовал
Вот несколько фич, которые уже реализованы:
- Авторизация / Регистрация: в каждом проекте по желанию можно подключить авторизацию и регистрацию пользователей. Будет также отдельный ресурс, где будут храниться ваши пользователи.
- 🔐 Защита ресурсов : можно выборочно защитить авторизацией определённые ресурсы, а какие-то оставить доступными без авторизации (просто кликнув на замочек)
- 💾 Загрузка файлов : если включить эту опцию, то в твоём проекте появляется дополнительный ресурс "uploads" где будут храниться все загруженные файлы для конкретного проекта.
- 📝 Удобный редактор данных: учитывая ваши замечания в комментариях, я подключил редактор Monaco Editor (урезанная версия редактора из VS Code) и Prettier для удобного форматирования данных. Также можно открыть файл и все данные сразу вставятся в редактор.
Это сервис будет намного круче чем обосанный MockAPI, который заблочил мои проекты и требующий денежку за каждый чих
P.S.: Про призы за ваши идеи я не забыл. Идеи оказались реально крутые, некоторые из них уже реализованы в этом проекте, за что вам ОГРОМНОЕ СПАСЕБО
На трансляции выберу победителей и скину денежку 5 лучшим ранее присланным идеям, вместо 3.
Залил на Boosty курс, можно уже смотреть там. В конце недели залью бесплатно на ютуб
🔥 https://boosty.to/archakov_blog/posts/fb702be1-ad2e-40dc-b1ae-d1a12070e01e Курс предназначен для уровня Middle / Senior-разработчиков. В видео объясняю почему именно для…
Залил на YouTube полный курс разработки облачного хранилища на NextJS и NestJS
Повторюсь, что формат экспериментальный и в отличие от предыдущих курсов, тут объясняю всё более сжато. Подробней тут.
Курс подойдёт для уровня Middle / Senior-разработчиков.
Как вам новый формат? Хотели бы ещё подобные курсы (в сжатом режиме)? И про что именно?
Залил на Boosty курс, можно уже смотреть там. В конце недели залью бесплатно на ютуб
🔥 https://boosty.to/archakov_blog/posts/fb702be1-ad2e-40dc-b1ae-d1a12070e01e Курс предназначен для уровня Middle / Senior-разработчиков. В видео объясняю почему именно для…
Опубликую видео через 10 минут
⚙️ Пока держите исходники:
Фронтенд: https://github.com/Archakov06/cloud-storage-client
Бэкенд: https://github.com/Archakov06/cloud-storage-backend
В последнее время вижу жалобы в комментах ютуба на MockAPI из-за разных ограничений. Особенно печально смотреть на 5$ за 20 проектов.
Давно уже задумывался о том, чтобы сделать свой "мокапи", бесплатный, с более полезным функционалом и без таких строгих ограничений на проекты.
На скриншоте черновой вариант дизайна, который я накинул за час-полтора. Возможно, проект будет выглядеть по другому.
Но для начала мне нужно понять, какой функционал не хватает вам в MockAPI или в подобных проектах? Или придумайте свои идеи.
За самые 3 интересные идеи ПРИЗ (Math.random() * 1000) рублей на счёт
И стоит ли вообще такой проект делать? 🤔
Залил на Boosty курс, можно уже смотреть там. В конце недели залью бесплатно на ютуб
https://boosty.to/archakov_blog/posts/fb702be1-ad2e-40dc-b1ae-d1a12070e01e
Курс предназначен для уровня Middle / Senior-разработчиков. В видео объясняю почему именно для этого уровня.
Если ты начинающий и хочешь сделать фуллстэк-проект, то многое будет сложно понять из этого курса (хотя можно и чекнуть, вдруг понятно будет). Но для начала советую смотреть этот.
🔥 В проекте будет:
- Авторизация / Регистрация
- Проверка авторизации на NextJS
- Профиль
- Загрузка файлов, удаление файлов, вывод всех файлов
- Навигация: Файлы, Фотографии, Корзина.
- Создание своих декораторов в NestJS
- Документация серверной части с помощью Swagger
- Работа с базой данных PostgreSQL + TypeORM
- Аккуратная и грамотная архитектурная и структурная часть фронтенда и бэкенда
⚙️ Стэк следующий:
Frontend:
- NextJS 13
- TypeScript
- SCSS
- Ant Design
- Nookies
- Axios
Backend:
- NestJS
- TypeScript
- TypeORM + PostgreSQL
- Swagger
- Multer
- PassportJS + JWT
Я щас МОНТАЖИРУЮ данный курс, а именно часть по бэкенду и в новом для себя формате. Сначала я записал экран и на него отдельно накладываю сейчас голос, из-за чего удалось сократить 3 часовое видео до 35 минут 🔥 Туториал в быстром формате и без лишних деталей…
НАКОНЕЦ-ТО БЕСПЛАТНЫЙ fullstack-курс NestJS + NextJS завершён!
Это самый затяжной курс, который я когда-либо записывал 🫠 Несколько раз простудился, выгорал, ленился делать монтаж, CS:GO + Apex и куча других причин не давали завершить этот курс.
На этот раз я уже заколебался с этим курсом и решил добить его до конца.
Записывал с 8 января (4 месяца). Так что, местами наслаждайтесь простуженным голосом 👀
Сначала залью на бусти (уже сегодня) и позже на ютуб.
Похожие
