Archakov Blog
12.1K subscribers
171 photos
15 videos
2 files
352 links
YouTube: https://youtube.com/c/ArchakovBlog

Vkontakte: https://vk.com/archakov_im

⚠️ Рекламу не делаю ⚠️
Download Telegram
Новый видос уже смонтировал и опубликовал в Boosty ⭐️ (👈 доступно по этой ссылке)

Да, пока в закрытом доступе 👀 Но ненадолго.

🤔 О чем видео?
В этом видео рассказываю о самых популярных ошибках с жуком useState, которые допускали в проектах где я работал джуны/мидлы и как их пофиксить.

Возможно где-то с монтажом накосячил (хотя старался 2 дня) и пока публикую в бусти.

Если всё ок, то опубликую БЕСПЛАТНО на канале через неделю. Б Е С П Л А Т НО афтер ван вик.

Но на этом не все! Следующая запись ещё про одно новое видео и без платной подписки
Please open Telegram to view this post
VIEW IN TELEGRAM
👍76🔥102😢2
Пока жадный автор зарабатывает на кровных деньгах подписчиков из бусти (за что вам отдельное спасибо 🖤).

🔥 Доступно ВТОРОЕ новое видео БЕСПЛАТНО И БЕЗ СМС!

Про React Intersection Observer и lazy-load (ленивая подгрузка картинок)

🤔 О чем видео?
Представьте, что вам нужно определить, что какой-то конкретный элемент виден на 10% или 100% и сделать какое-то действие? Например, анимировать элемент.

Нужно определить, что пользователь дошел до конечного скролла? Юзай Intersection Observer.

Нужно сделать ленивую подгрузку картинок? Тоже юзай это решение.

В Эльдорадо необходимо было динамически подгружать отдельные компоненты, когда на экране отобразился какой-нибудь элемент или отправлять отчет в аналитику о том, что пользователь увидел баннер и там мы юзали именно эту библиотеку.

Пока ещё не оформил видос для ютуба, жду вашей оценки.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥104👍243😁3👏2
Карл, го пообщаемся на #ВечернемСтриме? 👀

Хочется узнать как твои, да и самому есть много чего рассказать интересного.

Предлагаю 🔴 СЕГОДНЯ в 20:00 (МСК).

📝 Примерные темы у меня:
- Почему ReactJS делает так больно?
- Почему Vue и SolidJS лучше React? Может пора менять фреймворк?
- Что я изучил к концу 2022
- Почему меня не берут на работу?
- Как быть начинающему программисту в РФ и что делать в этих реалиях?
- Как джуну раскачаться на пет-проектах?

ℹ️ Если есть интересующие тебя темы для обсуждения, пиши в комментах или в чате на самой трансляции. Постараемся их тоже обсудить сегодня.

https://youtu.be/eiAToLpntoU
👍8612🔥9🎉8
🔥 На канале доступно новое видео по топ 5 ошибок с хуком useState.

Если такой контент вам зайдёт, то в планах рассказать и показать на реальных проектах ошибки с хуками useMemo + React.memo /useCallback, которые допускали не только джуны, но и мидлы/синьоры.

https://youtube.com/watch?v=fKZoF-cqino?1
🔥16522👍19🎉5
Я сейчас готовлю новый курс для уровня Middle / Senior по разработке Fullstack-проекта по типу аналога Яндекс.Диска на NextJS + NestJS

Через дней 10, думаю, будет уже доступен на канале.

Для нетерпеливых и тех, кто подписан на бусти, сегодня в 18:00 (МСК) будем с нуля разрабатывать этот проект.

На бусти будет доступен в виде трансляций, позже смонтирую и выложу на канал.

p.s.: пока баннер черновой и трансляция делается больше для отработки контента и поиска ошибок при записи.
🔥289👍449👏4🤯2🎉1
Archakov Blog
Я сейчас готовлю новый курс для уровня Middle / Senior по разработке Fullstack-проекта по типу аналога Яндекс.Диска на NextJS + NestJS Через дней 10, думаю, будет уже доступен на канале. Для нетерпеливых и тех, кто подписан на бусти, сегодня в 18:00 (МСК)…
Media is too big
VIEW IN TELEGRAM
Я щас МОНТАЖИРУЮ данный курс, а именно часть по бэкенду и в новом для себя формате.

Сначала я записал экран и на него отдельно накладываю сейчас голос, из-за чего удалось сократить 3 часовое видео до 35 минут 🔥

Туториал в быстром формате и без лишних деталей и повторюсь ещё раз, что он предназначен для уровня Middle >

Сейчас мне очень важно узнать ваше мнение по этому формату 🤔

Ибо на монтаж у меня уйдёт целый день и мне надо знать, стоит ли дальше монтировать видео в таком формате или нет.

Прикрепляю 2 минутное видео, чтобы было понятно что я для вас пилю.
426🔥133👍72🎉8👏5🤔2
Я не умер и более того, выпустил новый ролик 👀

https://www.youtube.com/watch?v=4-SOv7eTfoQ

Хочу в таком формате записать ещё парочку видосов. Есть идеи по какой библиотеке?

А вот по предыдущему посту скоро объясню почему ролик не выходит. Там прям боль 🥲
👍21038🔥19😁10🤔7👎2😢2🤩1
Archakov Blog
Я щас МОНТАЖИРУЮ данный курс, а именно часть по бэкенду и в новом для себя формате. Сначала я записал экран и на него отдельно накладываю сейчас голос, из-за чего удалось сократить 3 часовое видео до 35 минут 🔥 Туториал в быстром формате и без лишних деталей…
Касательно этого ролика и ответ на вопрос "где ты был?"

Видос БЫЛ БЫ опубликован ещё недели две-три назад, если бы не несколько "но".

Впервые в жизни, каждый день, на монтаж и запись этого видео я тратил по 3-4 часа после работы и так около 10 дней.

В один прекрасный день, открыв проект в Adobe Premier я увидел, что 5 дней моей жызне записи видео просто исчезли 👍

Потом я успел два раза простудиться. Во второй раз так, что долгое время были проблемы с голосом.

Да и куча других проблем и забот возникло, из-за чего вообще пропало желание не только записывать видео, а вообще программировать. В итоге решили взяться отпуск по работе.

Сейчас уже появилось желание делать новый контент. Но вот работать после отпуска оказалось больно 🫠

Единственное, спасает немного ChatGPT и выполняет пока 30-50% моей работы
Please open Telegram to view this post
VIEW IN TELEGRAM
166👍50😁13🤯5🔥2
Новый видос уже на Boosty (позже залью на канал)

Излил там всю боль и показал на реальных примерах из предыдущих работ и нынешней, как неправильно юзают хук useMemo

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

Как вы считаете, когда стоит и не стоит применять useMemo, ну и useCallback?
🔥72👍42😱2😁1
This media is not supported in your browser
VIEW IN TELEGRAM
Нашёл простую в применении библиотеку для анимаций списков - auto-animate

Сейчас записываю новое видео (нет, это не про тудушку) и возникла идея анимировать сам список задач.

Заюзал эту библиотеку и всё заработало идеально 🔥

Применить очень просто:
1. npm install @formkit/auto-animate
2. Внутри компонента const [parent] = useAutoAnimate()
3. Прикрепляем к самому списку ref={parent}

Например вот так:
<ul ref={parent}>
{items.map(...)}
</ul>

4. Готово!

Но есть маленький минус (субъективный). К бандлу прибавляется +13 кб. Если для вас это не критично, то смело можно юзать.
👍157🔥2513👏3🤮1
This media is not supported in your browser
VIEW IN TELEGRAM
В общем, записываю новый фуллстак курс на NextJS + NestJS 👀

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

Пока готова бэкенд часть на NestJS и её суперски получилось объяснить. Фронтенд записал тоже, осталось сделать монтаж.

Если Adobe Premiere опять не решит стереть мой проект из-за чего я забрасывал этот курс, то в 20-ых числах можно ожидать уже на ютубе.

Параллельно я готовлю ещё 2 новых видосах, пока в черновом варианте.

Чуть позже опишу что за новые видосы и заодно узнаю ваше мнение. Нужно ли их пилить или нет.
🔥524👍4938🤯5🎉5😁2🤩2
This media is not supported in your browser
VIEW IN TELEGRAM
Нашёл очень крутой плагин Codeium 🔥 для генерации кода в WebStorm, VS Code и т.п.

Это, конечно, не Copilot и не Tabnine, но работает довольно неплохо и самое главное — БЕСПЛАТНЫЙ.

Достаточно лишь написать первые несколько букв или слово и дальше плагин предлагает свои варианты и нажимаем Tab.

На видео я записал, как генерируется код функции поиска опции по ID.

Можно также выбирать разные варианты с помощью Alt + [
🔥152👍214🤯4👎2😁2
Archakov Blog
Нашёл очень крутой плагин Codeium 🔥 для генерации кода в WebStorm, VS Code и т.п. Это, конечно, не Copilot и не Tabnine, но работает довольно неплохо и самое главное — БЕСПЛАТНЫЙ. Достаточно лишь написать первые несколько букв или слово и дальше плагин предлагает…
Я тут задумался над одним комментарием из предыдущей записи и реально стало интересно, как работает этот плагин.

Решил через анализатор HTTP-запросов отследить, куда шлёт запросы WebStorm, когда я им пользуюсь.

И заметил, что плагин отправляет на свой сервер server.codeium.com любой открываемый файл в WebStorm.

Более того, информация о вашей винде, о редакторе, IP, сколько ОЗУ и т.п. тоже отправляется.

Конечно, это было очевидно, но всё же, хотел в этом убедиться сам и предупредить вас об этом 🧐

Если вы разрабатываете какой-то NDA-продукт с уникальными решениями, то лучше отключить подобные плагины.

Вполне возможно, что ваше уникальное решение окажется в каком-нибудь пет-проекте для магазина кроссовок или пицц 👀
😁170🤔23👍204🤮2👏1😱1🤣1
Archakov Blog
Я щас МОНТАЖИРУЮ данный курс, а именно часть по бэкенду и в новом для себя формате. Сначала я записал экран и на него отдельно накладываю сейчас голос, из-за чего удалось сократить 3 часовое видео до 35 минут 🔥 Туториал в быстром формате и без лишних деталей…
НАКОНЕЦ-ТО БЕСПЛАТНЫЙ fullstack-курс NestJS + NextJS завершён!

Это самый затяжной курс, который я когда-либо записывал 🫠 Несколько раз простудился, выгорал, ленился делать монтаж, CS:GO + Apex и куча других причин не давали завершить этот курс.

На этот раз я уже заколебался с этим курсом и решил добить его до конца.

Записывал с 8 января (4 месяца). Так что, местами наслаждайтесь простуженным голосом 👀

Сначала залью на бусти (уже сегодня) и позже на ютуб.
👍341🔥11640🎉12😁4
Залил на 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
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥282👍2612🎉9👏5
В последнее время вижу жалобы в комментах ютуба на MockAPI из-за разных ограничений. Особенно печально смотреть на 5$ за 20 проектов.

Давно уже задумывался о том, чтобы сделать свой "мокапи", бесплатный, с более полезным функционалом и без таких строгих ограничений на проекты.

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

Но для начала мне нужно понять, какой функционал не хватает вам в MockAPI или в подобных проектах? Или придумайте свои идеи.

За самые 3 интересные идеи ПРИЗ (Math.random() * 1000) рублей на счёт

И стоит ли вообще такой проект делать? 🤔
👍313🔥619😁3😢2🤯1🤩1
Archakov Blog
Залил на Boosty курс, можно уже смотреть там. В конце недели залью бесплатно на ютуб 🔥 https://boosty.to/archakov_blog/posts/fb702be1-ad2e-40dc-b1ae-d1a12070e01e Курс предназначен для уровня Middle / Senior-разработчиков. В видео объясняю почему именно для…
Залил на YouTube полный курс разработки облачного хранилища на NextJS и NestJS

▶️ https://www.youtube.com/watch?v=_oR1p79t6gw

Повторюсь, что формат экспериментальный и в отличие от предыдущих курсов, тут объясняю всё более сжато. Подробней тут.

Курс подойдёт для уровня Middle / Senior-разработчиков.

Как вам новый формат? Хотели бы ещё подобные курсы (в сжатом режиме)? И про что именно?
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥294👍3821🤔3👏2
Давно так не кайфовал от разработки пет-проекта, как от этого. Я пока забил на ютуб, ибо всё свободное время трачу на этот сервис.

Мотвация — запилить новый курс на VueJS или ReactJS (пока ещё думаю юзать вью или нет) с использованием уже моего сервиса, а не MockAPI

На следующей неделе планирую провести разговорный стрим на разные темы, давно мы не общались + покажу на трансляции этот проект и какие крутые фичи я реализовал 🤨

Вот несколько фич, которые уже реализованы:

- Авторизация / Регистрация: в каждом проекте по желанию можно подключить авторизацию и регистрацию пользователей. Будет также отдельный ресурс, где будут храниться ваши пользователи.

- 🔐 Защита ресурсов : можно выборочно защитить авторизацией определённые ресурсы, а какие-то оставить доступными без авторизации (просто кликнув на замочек)

- 💾 Загрузка файлов : если включить эту опцию, то в твоём проекте появляется дополнительный ресурс "uploads" где будут храниться все загруженные файлы для конкретного проекта.

- 📝 Удобный редактор данных: учитывая ваши замечания в комментариях, я подключил редактор Monaco Editor (урезанная версия редактора из VS Code) и Prettier для удобного форматирования данных. Также можно открыть файл и все данные сразу вставятся в редактор.

Это сервис будет намного круче чем обосанный MockAPI, который заблочил мои проекты и требующий денежку за каждый чих 💸

P.S.: Про призы за ваши идеи я не забыл. Идеи оказались реально крутые, некоторые из них уже реализованы в этом проекте, за что вам ОГРОМНОЕ СПАСЕБО 🤗

На трансляции выберу победителей и скину денежку 5 лучшим ранее присланным идеям, вместо 3.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥327👍5918🥰2👏1