Последний урок цикла https://youtu.be/AE5vDkg0Dx8
YouTube
Реакт построение приложения (Андрей Зубков, Тёма Сенюков)
В этой лекции разберемся с фреймворком Next. Поговорим про роутинг, ssg, ssr и многое другое. Посмотрим на популярные решения для стейт менеджмента и разберемся с организацией слоя данных в приложении на примере одного из них.
Неделя 2: Введение в Next.js
Темы:
Установка и настройка окружения
Создание первого приложения на Next.js
Структура файлов и папок
Уроки:
Установите Node.js и npm на ваш компьютер.
Создайте новое приложение Next.js с помощью npx create-next-app.
Изучите структуру проекта и основные папки: pages, public, styles.
Ресурсы:
Официальная документация Next.js
Видеоуроки на YouTube по установке Next.js
Темы:
Установка и настройка окружения
Создание первого приложения на Next.js
Структура файлов и папок
Уроки:
Установите Node.js и npm на ваш компьютер.
Создайте новое приложение Next.js с помощью npx create-next-app.
Изучите структуру проекта и основные папки: pages, public, styles.
Ресурсы:
Официальная документация Next.js
Видеоуроки на YouTube по установке Next.js
nextjs.org
App Router: Getting Started
Learn how to create full-stack web applications with the Next.js App Router.
Написал небольшой виджет для Биткоина, отслеживает:
-курс
-индекс страха\жадности
-доминацию
-ставку на PolyMarket "BTC будет 100к в 2024"
Upd: оптимизировал размер css.
Пояснение, у некоторых api, есть ограничение на запросы, если значения не выводит, то нужно подождать пару минут, когда их снимут.
repo
-курс
-индекс страха\жадности
-доминацию
-ставку на PolyMarket "BTC будет 100к в 2024"
Upd: оптимизировал размер css.
Пояснение, у некоторых api, есть ограничение на запросы, если значения не выводит, то нужно подождать пару минут, когда их снимут.
repo
❤2
Неделя 3: Маршрутизация и навигация
Темы:
Файловая система маршрутизации
Динамические маршруты
Компонент Link для навигации
Уроки:
Создайте несколько страниц и настройте навигацию между ними.
Изучите динамические маршруты для создания страниц с параметрами.
Реализуйте навигацию с помощью компонента Link.
Ресурсы:
Маршрутизация в Next.js
Темы:
Файловая система маршрутизации
Динамические маршруты
Компонент Link для навигации
Уроки:
Создайте несколько страниц и настройте навигацию между ними.
Изучите динамические маршруты для создания страниц с параметрами.
Реализуйте навигацию с помощью компонента Link.
Ресурсы:
Маршрутизация в Next.js
nextjs.org
Building Your Application: Routing
Learn the fundamentals of routing for front-end applications with the Pages Router.
❤1
Попробовал переписать шпаргалку по playWright. Сама шпора бесполезная
Пока из-за недостатка опыта и способа, которым я все это завел, работает криво в некоторых местах. Визуал не смог перенести из прошлой версии, которая не была одностраничным приложением под капотом😵
Как-нибудь вернемся к этому, когда набьем руку на Next JS.
Из ачивок получилось сделать на css свойствах переключение "страниц" и допом узнал как оптимизировать tailwind, чтобы не грузился 2.5мб файл стилей, а только нужные 8 кб. Подрочили на циферки в PSI было 80, стало 100. Еще бы попросить GPT Seo написать нам😍
в repo можно сравнить версии
Пока из-за недостатка опыта и способа, которым я все это завел, работает криво в некоторых местах. Визуал не смог перенести из прошлой версии, которая не была одностраничным приложением под капотом
Как-нибудь вернемся к этому, когда набьем руку на Next JS.
Из ачивок получилось сделать на css свойствах переключение "страниц" и допом узнал как оптимизировать tailwind, чтобы не грузился 2.5мб файл стилей, а только нужные 8 кб. Подрочили на циферки в PSI было 80, стало 100. Еще бы попросить GPT Seo написать нам
в repo можно сравнить версии
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2
Для изучения предмета с помощью нейросети
[SUBJECT] =предмет
[CURRENT_LEVEL]=начинающий/ средний/ продвинутый
LTIME_AVATLABLE] =время на занятия
(LEARNING_STYLE] =аудио/видео/текст/практика
[GOAL]=цель/желаемый уровень
Шаг 1: Оценка знаний
1. Разбей [SUBJECT] на ключевые компоненты
2. Оцени сложность каждого компонента
3. Укажи необходимые требования
4. Укажи необходимые знания
Распиши их в виде иерархии списка навыков
~ Шаг 2: Кривая обучения
1. Создай ключевые точки процесса обучения на основе
[CURRENT_LEVEL]
2. Структурируй темы по оптимальной кривой обучения
3. Укажи минимальное время на изучение каждой темы
4. Подгони под [TIME_AVAILABLE]
Распиши в виде таблицы с временными рамками
~ Шаг 3: Полезные ресурсы
1. Подбери учебные материалы в соответствии с [LEARNING_STYLE]:
- Видеоуроки
- Книги и статьи
- Упражнения
- Проекты
2. Оцени материалы по эффективности
3. Собери список из полезных ресурсов
Распиши подробный список материалов в порядке полезности
~ Шаг 4: Практика
1. Подготовь упражнения для каждой темы
2. Создай сценарии из реальной жизни для их применения
3. Укажи контрольные точки
4. Придумай структуру интервалов для ревью
Распиши план с расписанием упражнений
~ Шаг 5: Система отслеживания прогресса
1. Определи метрики прогресса
2. Подготовь критерии оценивания
3. Подготовь систему обратной связи
4. Внедри метрики для контрольных точек Распиши шаблон отслеживания прогресса
~ Шаг 6: Создание учебного расписания
1. Разбей обучение на ежедневные/еженедельные задачи
2. Учитывай периоды для отдыха и ревью
3. Добавь оценки на контрольных точках
4. Сбалансируй теорию и практику
Распиши подробное расписание с учетом [TIME AVAILABLE]
❤1💋1
Неделя 4: Получение данных и API
Темы:
getStaticProps и getServerSideProps
API Routes в Next.js
Клиентское и серверное получение данных
Уроки:
Научитесь получать данные на стороне сервера с помощью getStaticProps.
Создайте собственный API Route и взаимодействуйте с ним из компонента.
Изучите клиентское получение данных с помощью fetch или axios.
Ресурсы:
Получение данных в Next.js
Темы:
getStaticProps и getServerSideProps
API Routes в Next.js
Клиентское и серверное получение данных
Уроки:
Научитесь получать данные на стороне сервера с помощью getStaticProps.
Создайте собственный API Route и взаимодействуйте с ним из компонента.
Изучите клиентское получение данных с помощью fetch или axios.
Ресурсы:
Получение данных в Next.js
nextjs.org
Getting Started: Fetching Data
Learn how to fetch data and stream content that depends on data.
Неделя 5: Стилизация приложения
Темы:
Использование CSS Modules
Стилизация с помощью Styled JSX
Подключение CSS-фреймворков (Tailwind CSS, Bootstrap)
Уроки:
Примените CSS Modules для стилизации компонентов.
Изучите возможности Styled JSX для динамических стилей.
Интегрируйте Tailwind CSS в проект и примените утилитарные классы.
Ресурсы:
Стили в Next.js
Tailwind CSS с Next.js
Темы:
Использование CSS Modules
Стилизация с помощью Styled JSX
Подключение CSS-фреймворков (Tailwind CSS, Bootstrap)
Уроки:
Примените CSS Modules для стилизации компонентов.
Изучите возможности Styled JSX для динамических стилей.
Интегрируйте Tailwind CSS в проект и примените утилитарные классы.
Ресурсы:
Стили в Next.js
Tailwind CSS с Next.js
nextjs.org
Getting Started: CSS
Learn about the different ways to add CSS to your application, including Tailwind CSS, CSS Modules, Global CSS, and more.
🔥2
Неделя 6: Оптимизация и производительность
Темы:
Оптимизация изображений с компонентом Image
Динамический импорт и ленивая загрузка
Улучшение SEO с компонентом Head
Уроки:
Замените теги <img> на компонент Image для оптимизации изображений.
Реализуйте динамический импорт крупных библиотек или компонентов.
Добавьте мета-теги и заголовки страниц для SEO оптимизации.
Ресурсы:
Оптимизация в Next.js
Динамический импорт
Темы:
Оптимизация изображений с компонентом Image
Динамический импорт и ленивая загрузка
Улучшение SEO с компонентом Head
Уроки:
Замените теги <img> на компонент Image для оптимизации изображений.
Реализуйте динамический импорт крупных библиотек или компонентов.
Добавьте мета-теги и заголовки страниц для SEO оптимизации.
Ресурсы:
Оптимизация в Next.js
Динамический импорт
nextjs.org
App Router: Getting Started
Learn how to create full-stack web applications with the Next.js App Router.
💋1
Неделя 7: Работа с базами данных и деплой
Темы:
Интеграция с базой данных (например, MongoDB)
Деплой приложения на платформу (Vercel, Heroku)
Уроки:
Подключите базу данных MongoDB и выполните CRUD операции.
Настройте переменные окружения для безопасного хранения конфиденциальных данных.
Задеплойте приложение на Vercel и протестируйте его работу в продакшене.
Ресурсы:
Работа с MongoDB
Деплой Next.js на Vercel
Темы:
Интеграция с базой данных (например, MongoDB)
Деплой приложения на платформу (Vercel, Heroku)
Уроки:
Подключите базу данных MongoDB и выполните CRUD операции.
Настройте переменные окружения для безопасного хранения конфиденциальных данных.
Задеплойте приложение на Vercel и протестируйте его работу в продакшене.
Ресурсы:
Работа с MongoDB
Деплой Next.js на Vercel
❤1🔥1
«Нашёл ли ты удовольствие в написании кода? — А твой код принёс пользу другим?» 🐵
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1🐳1💊1
Повторяющиеся жизненные ситуации указывают на внутренние нерешённые проблемы, которые мы продолжаем игнорировать. Они учат нас через повторение, пока мы не изменим своё восприятие и поведение.
Чтобы справиться с такими ситуациями:
1. Осознайте свои чувства: не отвлекайтесь на мысли, а сфокусируйтесь на эмоциях, которые возникают в момент события.
2. Разделите ответственность: осознайте, где ваша зона контроля, а где нет.
3. Ищите внутреннюю причину: повторяющиеся ситуации часто отражают наши внутренние качества, которые притягивают схожие события.
4. Меняйте подход: реагируйте осознанно и по-другому, чтобы разорвать круг повторений.
Когда мы осознаём свои эмоции, извлекаем урок и действуем иначе, ситуация перестаёт повторяться, и жизнь двигается дальше.
Чтобы справиться с такими ситуациями:
1. Осознайте свои чувства: не отвлекайтесь на мысли, а сфокусируйтесь на эмоциях, которые возникают в момент события.
2. Разделите ответственность: осознайте, где ваша зона контроля, а где нет.
3. Ищите внутреннюю причину: повторяющиеся ситуации часто отражают наши внутренние качества, которые притягивают схожие события.
4. Меняйте подход: реагируйте осознанно и по-другому, чтобы разорвать круг повторений.
Когда мы осознаём свои эмоции, извлекаем урок и действуем иначе, ситуация перестаёт повторяться, и жизнь двигается дальше.
Неделя 8: Практический проект
Темы:
Создание полнофункционального приложения
Рефакторинг и оптимизация кода
Уроки:
Спланируйте и начните разработку собственного проекта (например, блог, TODO приложение, e-commerce сайт).
Примените все изученные технологии и подходы.
Проведите ревью кода, оптимизируйте производительность и улучшите UX/UI.
Ресурсы:
Примеры проектов на Next.js
Сообщества разработчиков для обратной связи (форумы, Slack, Discord)
Темы:
Создание полнофункционального приложения
Рефакторинг и оптимизация кода
Уроки:
Спланируйте и начните разработку собственного проекта (например, блог, TODO приложение, e-commerce сайт).
Примените все изученные технологии и подходы.
Проведите ревью кода, оптимизируйте производительность и улучшите UX/UI.
Ресурсы:
Примеры проектов на Next.js
Сообщества разработчиков для обратной связи (форумы, Slack, Discord)
GitHub
next.js/examples at canary · vercel/next.js
The React Framework. Contribute to vercel/next.js development by creating an account on GitHub.
👍2
Вот основные тезисы из книги “Атомные привычки” Джеймса Клира:
Основные принципы:
1. Сила маленьких изменений:
• Небольшие ежедневные улучшения (1% в день) приводят к значительным результатам со временем.
2. Фокус на системе, а не на целях:
• Цели важны для направления, но система (ежедневные действия) — это то, что приводит к результатам.
3. Идентичность и привычки:
• Ваши действия формируют вашу личность. Например, вместо «Я хочу заниматься спортом» думайте «Я — человек, который заботится о своём здоровье».
Четыре закона создания хороших привычек:
1. Сделайте это очевидным:
• Расположите триггеры (напоминания) на видном месте.
• Используйте связку действий: «После [текущей привычки] я сделаю [новую привычку]».
2. Сделайте это привлекательным:
• Связывайте привычки с тем, что вам нравится.
• Найдите группу людей с подобными целями (социальное окружение).
3. Сделайте это простым:
• Устраните препятствия.
• Начните с маленьких шагов (например, 2 минуты практики).
4. Сделайте это удовлетворяющим:
• Немедленно поощряйте себя за выполненную привычку.
• Отслеживайте прогресс (например, с помощью календаря).
Устранение плохих привычек:
1. Сделайте их невидимыми:
• Уберите триггеры из окружения.
2. Сделайте их непривлекательными:
• Напоминайте себе о негативных последствиях.
3. Сделайте их сложными:
• Увеличьте усилия, необходимые для их выполнения.
4. Сделайте их неудовлетворяющими:
• Уберите немедленное удовольствие от плохой привычки.
Практические советы:
• Правило двух минут: Любую привычку можно упростить до двух минут. Например, вместо «Я буду читать каждый день» начните с «Я прочитаю одну страницу».
• Подведение итогов: Регулярно анализируйте, какие привычки работают, а какие требуют корректировки.
• Будьте терпеливы: Привычки требуют времени, чтобы закрепиться. Будьте последовательны.
Основные принципы:
1. Сила маленьких изменений:
• Небольшие ежедневные улучшения (1% в день) приводят к значительным результатам со временем.
2. Фокус на системе, а не на целях:
• Цели важны для направления, но система (ежедневные действия) — это то, что приводит к результатам.
3. Идентичность и привычки:
• Ваши действия формируют вашу личность. Например, вместо «Я хочу заниматься спортом» думайте «Я — человек, который заботится о своём здоровье».
Четыре закона создания хороших привычек:
1. Сделайте это очевидным:
• Расположите триггеры (напоминания) на видном месте.
• Используйте связку действий: «После [текущей привычки] я сделаю [новую привычку]».
2. Сделайте это привлекательным:
• Связывайте привычки с тем, что вам нравится.
• Найдите группу людей с подобными целями (социальное окружение).
3. Сделайте это простым:
• Устраните препятствия.
• Начните с маленьких шагов (например, 2 минуты практики).
4. Сделайте это удовлетворяющим:
• Немедленно поощряйте себя за выполненную привычку.
• Отслеживайте прогресс (например, с помощью календаря).
Устранение плохих привычек:
1. Сделайте их невидимыми:
• Уберите триггеры из окружения.
2. Сделайте их непривлекательными:
• Напоминайте себе о негативных последствиях.
3. Сделайте их сложными:
• Увеличьте усилия, необходимые для их выполнения.
4. Сделайте их неудовлетворяющими:
• Уберите немедленное удовольствие от плохой привычки.
Практические советы:
• Правило двух минут: Любую привычку можно упростить до двух минут. Например, вместо «Я буду читать каждый день» начните с «Я прочитаю одну страницу».
• Подведение итогов: Регулярно анализируйте, какие привычки работают, а какие требуют корректировки.
• Будьте терпеливы: Привычки требуют времени, чтобы закрепиться. Будьте последовательны.
👍4❤1
Мини-база по Xpath:
#BAS
div span button input *//*[contains(text(), 'СодержитТекст')]
//*[text() = 'ТочныйТекст']
//div[contains(text(), 'КраснаяКнопка') and contains(@class, 'Red_button')]
//*[contains(text(), 'Connect wallet') or contains(text(), 'Connect Wallet') or contains(text(), 'Connect')]
//a[contains(@href, 'abs.xyz')]
//*[contains(., 'Balance: ')]
#BAS
💘1
Скука — это альфа-поведение https://www.youtube.com/watch?v=FGdYDvtSJg8
YouTube
Как Скука Даст Превосходство
TELEGRAM: https://t.me/+QLaAXKnnzLOV-AIV
( БЕСПЛАТНЫЕ программы тренировок и текстовые версии )
00:00 Зачем Она Нужна
01:00 Красная Кнопка
01:44 Волшебный момент
02:10 Ожидание Кайфа
04:23 Верное Предсказание
04:52 Недовольное Существо
06:43 Раньше…
( БЕСПЛАТНЫЕ программы тренировок и текстовые версии )
00:00 Зачем Она Нужна
01:00 Красная Кнопка
01:44 Волшебный момент
02:10 Ожидание Кайфа
04:23 Верное Предсказание
04:52 Недовольное Существо
06:43 Раньше…
app.js
9.3 KB
#script
Софт на gigaverse.io на основе этого репо https://github.com/web4-js/gigaverse-bot + вайб-кодинг.
Скрипт проверяет максимальную энергию чтобы определить наличие у нас сока(возможно наличие гига ром ломает эту логику, не могу проверить) и запускает данжи за 120 энергии пока они доступны и далее за 40 пока не кончится энергия.
-исправил ошибку чтения количества энергии,
-обновил параметры запроса под обновление с соком,
-добавил настройки баланса для выбора оружия
Сам я использую его в BAS:
Нужно войти в игру через селекторы, прочитать новый токен через JS и дальше применить кубик nodejs и настроить ожидание 1500+ с на нем
Для запуска из консоли нужно установить Node.js, вписать в кавычках(`)
Софт на gigaverse.io на основе этого репо https://github.com/web4-js/gigaverse-bot + вайб-кодинг.
Скрипт проверяет максимальную энергию чтобы определить наличие у нас сока(возможно наличие гига ром ломает эту логику, не могу проверить) и запускает данжи за 120 энергии пока они доступны и далее за 40 пока не кончится энергия.
-исправил ошибку чтения количества энергии,
-обновил параметры запроса под обновление с соком,
-добавил настройки баланса для выбора оружия
Сам я использую его в BAS:
Нужно войти в игру через селекторы, прочитать новый токен через JS и дальше применить кубик nodejs и настроить ожидание 1500+ с на нем
var auth = JSON.parse(localStorage.getItem("authResponse"));
// Сохраняем значения в BAS-переменные
[[JWT]] = auth.jwt;
[[WALLETADDRESS]] = auth.user.walletAddress;Для запуска из консоли нужно установить Node.js, вписать в кавычках(`)
токен (dev tools F12-application-local storage-authResponse-jwt) и кошелек в app.js, запуститьnode app.js