🐈‍⬛ Как взаимодействуют frontend и backend

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

➡️ Как это работает:

Представьте себе ресторан. Вы, как клиент, видите только то, что находитесь в зале (frontend). Вы можете выбрать блюда из меню и сделать заказ. Далее официант (клиентский запрос) передаёт этот заказ на кухню (backend). Кухня проверяет, есть ли все ингредиенты, готовит заказ и отправляет его обратно через официанта.

➡️ Пошаговое взаимодействие:

1. Запрос от клиента:

Когда вы, как пользователь, обращаетесь к веб-сайту, ваш браузер отправляет HTTP-запрос на сервер. Это может быть запрос данных, загрузка страницы, или выполнение какого-то действия (например, добавление товара в корзину).

2. Обработка запроса на сервере

Сервер запрос, обрабатывает его: может запросить данные из базы данных, выполнить нужные вычисления или взаимодействовать с другими сервисами.

3. Ответ от сервера

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

4. Передача данных по протоколу

Для обмена данными используется протокол HTTP или HTTPS. Для обеспечения безопасности передачи данных часто используется шифрование SSL/TLS.

🌀Frontend и backend работают в тесной связке, обеспечивая полноценную работу веб-приложений.

🐸Proglib Academy

#буст

🚚📦 Delivery Manager: что за профессия и какую роль она играет в разработке?

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

🔗 Читать статью

🐸Proglib Academy

#буст

🔥 «Пиши код каждый день без выходных»

Без отдыха вы быстро словите выгорание. Да и эффективность падает: мозг тупо перестаёт усваивать новое, когда его постоянно грузят.

Разнообразие задач и паузы в работе — это не лень, а часть нормального процесса обучения. Иногда именно на отдыхе приходят лучшие инсайты.

👉 А вы как считаете: нужен ли новичку режим «кодь каждый день», или лучше давать себе паузы?

🐸Proglib Academy

#междусобойчик

🧃 Полезные горячие клавиши в VS Code, которые реально ускоряют жизнь

Ctrl + P → быстрый поиск и открытие файлов.
Ctrl + Shift + P → командная палитра (вызов любых команд).
Ctrl + B → скрыть/показать боковую панель.
Ctrl + / → закомментировать строку или выделенный блок.
Alt + ↑ / ↓ → переместить строку вверх или вниз.
Ctrl + D → выделить следующее вхождение слова.
Ctrl + Shift + L → выделить все вхождения сразу.
Ctrl + Space → подсказка по автодополнению.
Ctrl + Shift + K → удалить строку.
Ctrl + Tab → переключение между открытыми файлами.

Освойте эти сочетания — и работать станет как минимум в два раза быстрее.

🐸Proglib Academy

#буст

☹️ Вход в IT уже не тот

Теперь вход в IT — это вход в чат с ИИ? 🤔

🐸Proglib Academy

#междусобойчик

🔍 Задачка на внимательность

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

Твоя задача: найти и объяснить ошибки. Сколько багов ты насчитаешь 👀

Подсказка: подумай про замыкания, setTimeout, контекст вызова и потери данных.

🐸Proglib Academy

#междусобойчик

Теории о том, что ИИ делают тупее, чтобы айтишники не потеряли работу, приобретают новые доказательства 🔍

🐸Proglib Academy

#развлекалово

🙂 Как на самом деле работает async и await

Многие используют эти конструкции, совершенно не понимая, что там под капотом. Давайте разберёмся, как работают эти конструкции и почему именно они делает твой код чище и понятнее.

⭐ Что такое async и await

• async: ключевое слово перед функцией делает её асинхронной. Это означает, что она всегда возвращает промис, даже если вы явно не указали это.

Например:

async function fetchData() {
return "Данные получены";
}

fetchData().then(console.log); // Выведет: "Данные получены"

await: используется внутри асинхронной функции. Заставляет код «подождать» завершения промиса, после чего возвращает его результат.

async function fetchData() {
let promise = new Promise((resolve) => {
setTimeout(() => resolve("Данные получены"), 2000);
});

let result = await promise;
console.log(result); // Выведет: "Данные получены" через 2 секунды
}

fetchData();

⭐ Что используется для обработки ошибок

Стандартный блок try...catch:

async function fetchData() {
try {
let response = await fetch('https://api.example.com/data');
let data = await response.json();
console.log(data);
} catch (error) {лол
console.error('Ошибка:', error);
}
}

fetchData();

⭐ Преимущества использования async/await

• Упрощение кода: асинхронный код становится более читаемым и похожим на синхронный, что облегчает его понимание и поддержку.

• Избегание «адской пирамиды колбэков»: async/await помогает избежать глубокой вложенности, характерной для колбэков.

Этот подход упрощает работу с промисами и делает код более линейным и читаемым.

🐸Proglib Academy

#буст

😤 Коллеги, будьте искренними — только так можно добиться настоящего роста.

🐸Proglib Academy

#развлекалово