⚡️ Я с понедельника-вторника включаюсь в работу, практически полностью автономен уже, если только не форс-мажор. Это и для тех, кто ждет от меня ответа по чему-либо.

А сюда будет roadmap по full-stack разработке - в дополнение к бэкенду, чтобы делать вот такие же приложения, как выше, сайты, магазины и т.д.

📇 Че будет:

- HTML, CSS, JavaScript — фундамент;
- Git и основы работы с командой;
- React / Vue — фронтенд;
- Python — бэкенд;
- Базы данных (SQL + NoSQL);
- REST API и аутентификация;
- Docker и деплой;
-Архитектура и best practices.

P.S. я научился ставить длинное тире, это не нейронка текст писала, только делала картинку.

Ставь лайк если нравятся мужчины ❤️

📱 FileSync — open-source инструмент для передачи файлов между устройствами в реальном времени . Сам пользуюсь уже какое-то время, рекомендую.

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

🚀 Возможности:

• Передача файлов из одного устройства сразу на несколько других ;
• Работа через WebRTC (прямое соединение между устройствами);
• End-to-end шифрование ;
• Простой интерфейс в браузере;
• Возможность самостоятельного развёртывания через Docker.

⚙️ Технологии: JavaScript, WebRTC, FastAPI, Docker

📦 Лицензия: MIT

Удобное решение для быстрого обмена файлами между своими устройствами или внутри команды.

⚡️ Сейчас полностью паршу tgstat.com/|telega.in.

Если кому нужна отсортированная информация о каналах/чатах - пишите (не бесплатно, само собой). Резерв на покупку через бота @magerdev_bot. Пример выдачи в комментариях, в моменте более 500 тыс уникальных строк, к финалу будет база 1 млн + релевантных, без мусора, где есть активные посты/комментарии.

Сортировка по названию, региону, количеству сабов, тематике, ссылка в Телеграм + ссылка на страницу сообщества в тгстат/телегаин.

p.s. для тех, кто не шарит, кому и зачем такое нужно - искать сообщества для работы шлюхоботов, массовая закупка рекламы, таргет, сбор информации о пользователях в чатах, приглашение пользователей без настроек приватности в свои чаты с целью агрессивной рекламы и т.д.

🚀 ШОРТКАТЫ В ТЕРМИНАЛЕ LINUX, КОТОРЫЕ ЭКОНОМЯТ ЧАСЫ

Оказывается для многих это тайна - они не такие, как на винде. Работаешь в терминале каждый день? Эти комбинации - must know, особенно при работе через SSH и т.д.

━━━━━━━━━━━━━━━━━━
🧭 НАВИГАЦИЯ ПО СТРОКЕ

Ctrl + A → в начало строки
Ctrl + E → в конец строки
Alt + B → назад на слово
Alt + F → вперёд на слово
Ctrl + XX → прыгнуть к началу / обратно

━━━━━━━━━━━━━━━━━━
✂️ РЕДАКТИРОВАНИЕ

Ctrl + U → удалить до начала строки
Ctrl + K → удалить до конца строки
Ctrl + W → удалить слово перед курсором
Alt + D → удалить слово после курсора
Ctrl + Y → вставить удалённое
Ctrl + D → удалить символ / выйти из терминала

━━━━━━━━━━━━━━━━━━
🔁 ИСТОРИЯ КОМАНД

Ctrl + R → поиск по истории (топ-фича)
Ctrl + P → предыдущая команда
Ctrl + N → следующая команда
↑ / ↓ → листать историю
!! → повторить последнюю
!n → выполнить команду №n

━━━━━━━━━━━━━━━━━━
🛑 УПРАВЛЕНИЕ ПРОЦЕССАМИ

Ctrl + C → остановить выполнение
Ctrl + Z → приостановить процесс
fg → вернуть в передний план
bg → продолжить в фоне
jobs → показать фоновые процессы

━━━━━━━━━━━━━━━━━━
⚡️ АВТОДОПОЛНЕНИЕ

Tab → автодополнение
Tab + Tab → показать варианты
Ctrl + L → очистить экран

━━━━━━━━━━━━━━━━━━
💡 ЕСЛИ ВЫУЧИТЬ ВСЕГО 5:

Ctrl + R
Ctrl + A
Ctrl + E
Ctrl + U
Tab

Продуктивность вырастет кратно 🔥

💾 Сохрани, чтобы не потерять.

P.S. по постам и видео пока не продуктивно - мало потужності. Хватает ресурсов только на работу.

⚡️ FULLSTACK ROADMAP

ЭТАП 1 — HTML, CSS, JAVASCRIPT

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

─────────────────────

1. HTML — структура и семантика

HTML — это не “набор тегов”, а описание смысла документа. Семантика — это контракт между вами и браузером.

Используйте: -<header>, <main>, <section>, <article>, <footer>, <button>. Не используйте <div> там, где есть семантический элемент. Кнопка должна быть <button>, а не <div> с обработчиком клика — иначе вы ломаете доступность и поведение по умолчанию.

Где учить:

• MDN Web Docs (HTML)
• HTML Academy (бесплатные тренажёры)

Что нужно понимать:

— как строится DOM;
— как работают формы ;
— базовые принципы доступности.

─────────────────────

2. CSS — layout и адаптивность

CSS — это управление моделью раскладки. В современном фронтенде обязательны:

• Flexbox — одномерные раскладки;
• Grid — двумерные сетки.

‼️ Float — устаревший подход для layout.

Принцип: Mobile First. Сначала корректная работа на 375px, потом масштабирование вверх через media queries.

📎 Где учить:

• Flexbox Frogg
• Grid Garden
• CSS-Tricks Flexbox Guide

Что нужно понимать:

— как работает поток документа;
— как рассчитываются размеры;
— как поведение меняется при сужении экрана.

─────────────────────

3. JavaScript — поведение и взаимодействие

JavaScript — единственный язык, который исполняется в браузере(‼️). Без него сайт — статический документ.

До фреймворков необходимо уверенно владеть Vanilla JS.

База:

— DOM API (поиск, изменение, удаление элементов);
— События и всплытие;
— event.preventDefault();
— let / const (без var);
— === вместо ==;
— null и undefined;
— стрелочные функции;
— Fetch API и работа с JSON.

Где учить:

• Learn JavaScript (Илья Кантор)
• Codewars (8–7 kyu для набивки синтаксиса)

Если вы не понимаете DOM, фреймворки будут магией. Магия не масштабируется.

─────────────────────

⚡️ Практика:

Сделайте Landing Page без библиотек:

— семантическая структура;
— адаптивность;
— бургер-меню;
— модальное окно с формой;
— отправка без перезагрузки (console.log, очистка, закрытие);
— переключение темы с сохранением в localStorage.

Без Bootstrap, Tailwind и UI-китов. Нужно понимать платформу, а не только инструменты.

Готовность двигаться дальше:

— верстка не ломается на мобильной ширине;
— понимаете разницу между "==" и "===";
— различаете null и undefined;
— можете объяснить всплытие событий;
— можете отцентрировать элемент несколькими способами.

🎄 Без этой базы всё остальное — просто ускоренное копирование кода. Постарался найти, проверить, поспрашивать для вас ресурсы, которые реально будут полезны по каждому разделу для изучения/тренировки. Следующий пост — про то, как не потерять этот код: Git, GitHub и основы работы в команде. Хоть в backend уже было, не лишним будет повторить.

#roadmap #fullstack #html #css #js

Поздравляю победивших, в ближайшее время со всеми свяжусь и выдам призы! 🎉

👀 Сделал себе 3-й аккаунт в ТТ, получается, с регионом Украина и без монетизации.

Не знаю, в чем проблема, но на этих двух акках, который Live и основной, началась какая-то душка по просмотрам/рекомендациям. Много людей жалуются, что если раньше все мои ролики попадались, то сейчас больше месяца не появляюсь. Возможно, между регионом/просмотрами с СНГ есть теперь прямая корреляция.

Опять таки, ради эксперимента, пару дней-недель ролики буду выставлять туда. Так что если увидите в ТТ - это не фейк, это я.

Кому интересно - 📱ссылка.

P.S. сори за беспокойство в выходной. На вечер уже заряжено продолжение roadmap, а также пост о JS+TS в отдельности.

💡 Оффтоп: Как правильно вкатиться в JavaScript и без боли перейти на TypeScript

Сделаем небольшую паузу в нашем основном Fullstack Roadmap. Вы задали отличный вопрос, я делал об этом видео и это заслуживает отдельного поста. Для условного понимания, 50% приложения Food Bot - это TS.

TypeScript — это не отдельный язык. Это надстройка (superset) над JavaScript. Если вы не понимаете замыкания, Event Loop или контекст this в JS, типы вас не спасут, а только запутают. Это к тому, что не следует сразу бросаться в TS - literally выстрел себе в колено.

Вот оптимальный, проверенный опытом (моим и не только) маршрут от Vanilla JS до уверенного TypeScript, с лучшими бесплатными ресурсами.

🟨 Этап 1: Фундамент JavaScript (без фреймворков и типов)

Ваша цель — понять, как язык работает под капотом и выучить современные стандарты (ES6+).

📌 Что нужно знать железобетонно:

• Разница между var, let, const (и почему var нужно забыть).
• Reference vs Value types (почему {} === {} возвращает false).
• Методы массивов: map, filter, reduce (вы будете использовать их каждый день).
• Асинхронность: Promises, async/await и как работает Event Loop (это спросят на 100% собеседований).

📚 Где учить:

1. Learn.javascript.ru
Библия. Никакие видеокурсы не заменят этот учебник.
Пройдите разделы 1 (Язык) и 2 (Браузер).
2. Roadmap.sh / JavaScript
Лучший визуальный Roadmap.
Идите по желтым блокам сверху вниз.
3. JavaScript30
Бесплатный курс от Wes Bos.
30 дней — 30 маленьких проектов на чистом JS без библиотек. Идеально для набивания руки.

🟦 Этап 2: Переход на TypeScript

Когда вы можете написать простую логику на JS и отправить fetch-запрос без гугла — пора добавлять типизацию. TypeScript решает одну главную задачу: он ловит ошибки до того, как вы запустите код. Вы перестанете получать "Cannot read property 'x' of undefined" в продакшене.

📌 Что учить в TS:

• Базовые типы (string, number, boolean, массивы).
• Interfaces и Types (и в чем между ними разница).
• Union-типы (string | number) и Literal-типы.
• Generics (Дженерики): <T>.
Самая сложная, но самая важная часть TS для переиспользуемого кода.
• Utility Types: Partial, Omit, Pick, Record.

📚 Где учить:

1. Официальный Handbook
Документация TS написана невероятно круто и понятно. Начинайте с раздела "The Basics".
2. Total TypeScript
Мэтт Покок (Matt Pocock) считается одним из лучших преподавателей по TS. Его бесплатный базовый курс обязателен к прохождению.
3. Type Challenges
Когда освоите базу — идите сюда. Это LeetCode, но только для для TypeScript. Решайте задачи уровня Warm-up и Easy. Классный тренажер, сам такое делал.

⚙️ Практический мост: как объединить знания?

Лучший способ перейти на TS — взять свой старый проект на чистом JS и переписать его на TypeScript.

Пошагово:

1. Добавьте в проект файл tsconfig.json.
2. Включите "strict": true (обязательно!).
TS без строгого режима — это деньги на ветер.
3. Измените расширения файлов с .js на .ts.
4. Весь ваш редактор (VS Code) загорится красным.
5. Начинайте методично описывать интерфейсы для ваших данных, пропсов и ответов от API, пока краснота не исчезнет.

‼️ Важно:

Не используйте тип any! Написание any — это фактически отключение TypeScript. Если вы пишете any, значит, вы просто сдались. Когда чуть пробежите JS, а потом зацените TS - поймете, че я тут несу. Используйте unknown, если действительно не знаете, что придет,
и сужайте тип дальше через проверки.

#js #ts #JavaScript #TypeScript

🐙 Этап 2: Git и GitHub.

Уже было в backend карте, но повторим суть. Мы сверстали сайт, он работает. Но пока он лежит у вас в папке локально и вы кидаете его кенту/такому же энтузиасту, как вы через ТГ или Google Disk - долго это дело не проживет. Нужно со старта учиться делать все хорошо, профессионально. Тем более, на работе/в стартапе вы точно столкнетесь с тем, что над проектом работают 5-10 человек одновременно. Поэтому, учимся системе контроля версий и культуре командной работы.

📱 1. Git и GitHub/GitLab

Еще раз по терминологии. Git - это страховка которая нужна в первую очередь тебе самому (!). GitHub (или GitLab, чаще встречается в коммерции, ибо можно поднять его на своем сервере) - это социальная сеть для кода. Если вашего кода нет в репозитории - его "не существует".

Кстати, недавно выяснил, что существуют некие GUI-клиенты (кнопки в редакторе) для работы с git. Это настолько лажа, что я их называть тут даже не буду - не смотрите туда. Важно понимать как оно все работает, а не просто кнопки нажимать. Учимся работать руками, в терминале. Поэтому, коротко выделю основное:

Три состояния файла:

- Modified
Вы изменили файл, но Git еще не следит за этим изменением.
- Staged (Index)
Вы сказали Git: «Я хочу включить это изменение в следующий снимок».
Команда: git add
- Committed
Снимок сделан и сохранен в истории.
Команда: git commit

Основные команды, нужно знать:

- "git status" - вводите её каждые 5 минут. Она показывает, где вы и что происходит.
- "git add ." - добавить всё (лучше добавлять файлы поштучно).
- "git commit -m "feat: added header"" - зафиксировать изменения.
- "git push origin main" - отправить на сервер.
- "git pull" - забрать чужие изменения.

🔼 2. Ветвление (branching)

В нормальных конторах в ветку main (или master) никто напрямую не пишет. Там всегда рабочий production-код. Поэтому наш рабочий процесс следующий:

1) Создать ветку под задачу: "git checkout -b feature/login-form"
2) Написать код и закоммитить.
3) Отправить ветку: "git push -u origin feature/login-form"
4) Создать Pull Request.
5) Провести Code Review и выполнить Merge.

Где учить:

- Learn Git Branching - визуальный тур, покажет, как команды работают "под капотом";
- Atlassian Git Tutorial - отличный справочник с картинками, объясняющий сложные вещи (rebase, cherry-pick) простым языком.

3. .gitignore и node_modules

Ошибка №1 - залить node_modules в Git. Это норм (пока учитесь, не шарите), но так делать не нужно. Поэтому всегда, ВСЕГДА в корне проекта создаём файл .gitignore:

node_modules/
.env
.DS_Store
dist/

Если в репозитории есть node_modules - это ужас. Также, как и .env, с вашими токенами/ключами, credentials.

🤷‍♂️ 4. Культура коммитов (сonventional commits)

Не пишите в коммитах: "fix", "update" и не дай боже "asd". Даже для своих, а то получите плохую привычку. Используйте стандарт:

- feat: новая фича;
- fix: исправление бага;
- refactor: переписан код без изменения функционала;
- docs: обновлена документация.

🏄‍♂️ 5. Практическое задание по этапу

Берем нашу "Визитку" из первого этапа и превращаем её в репозиторий. Ваше ТЗ:

1) Инициализация:
- Создать репозиторий на GitHub.
- Связать локальную папку:
- git init
- git remote add origin <url>
2) Игнор:
- Создать .gitignore и исключить системные файлы.
3) Ветки:
- Создать develop от main.
- Создать feature/add-animation от develop.
4) Изменения:
- В ветке feature добавить простую CSS-анимацию.
- Закоммитить изменения.
5) Финал:
- Создать Pull Request из feature/add-animation в develop.
- Провести self-review.
- Написать комментарий "Looks good".
- Смерджить ветку.

Следующий пост по этой теме - React и Vue. Почему jQuery умер, и т.д.

#roadmap #fullstack #git #github