📍 Начни отсюда

Подготовка к собеседованиям и поиск работы в IT — всё в одном месте.

━━━━━━━━━━
ПОДГОТОВКА К СОБЕСУ

📚 База вопросов
https://yeahub.ru/questions

💼 Реальные собесы Big Tech
https://yeahub.ru/collections

🚀 Тренажёр собеседований
https://yeahub.ru/quiz

👨🏻‍💻 Задачи с собесов (livecoding)
https://yeahub.ru/dashboard/live-coding/tasks

🧠 Ключевые слова из вакансий
https://yeahub.ru/hh-analytics

━━━━━━━━━━
ВЫБЕРИ НАПРАВЛЕНИЕ

→Backend

👩‍💻 C# https://t.me/yeahub_c_sharp_dev
👩‍💻 Java https://t.me/yeahub_java_backend
👩‍💻 Python https://t.me/yeahub_python_backend
👣 Go https://t.me/yeahub_go_backend
👩‍💻 Node.js https://t.me/yeahub_node_backend
🖥 PHP https://t.me/yeahub_php_backend
🖥 Ruby https://t.me/yeahub_ruby_backend
👣 Rust https://t.me/yeahub_rust_backend
👩‍💻 C/C++ https://t.me/yeahub_c_development

→Frontend & Mobile

🖥 Frontend https://t.me/yeahub_frontend
👩‍💻 Android https://t.me/yeahub_android_mobile
👩‍💻 iOS https://t.me/yeahub_ios_mobile
👩‍💻 GameDev https://t.me/yeahub_game_dev

→Data & AI

🤖 ML Engineer https://t.me/yeahub_machine_learning
🖥 Data Science https://t.me/yeahub_data_science

→QA / DevOps / Analyst

👩‍💻 QA https://t.me/yeahub_testing_qa
💻 DevOps https://t.me/yeahub_devops
🖥 BA/SA https://t.me/yeahub_analyst
😀 1C https://t.me/yeahub_1c

━━━━━━━━━━
РАБОТА И АКТИВНОСТИ

👨‍💻 Вакансии https://t.me/yeahub_job
📆 Митапы https://t.me/yeahub_events
📚 Общее IT https://t.me/yeahub_tech
🚀 Анонсы https://t.me/yeahub

━━━━━━━━━━
ПРОЕКТ

🚀 Сайт https://yeahub.ru
🖥 GitHub https://github.com/YeaHubTeam/yeahub-platform
📹 YouTube https://www.youtube.com/@yeahub
🎵 TikTok https://www.tiktok.com/@yeahub_it
📷 Inst https://www.instagram.com/yeahub_it
✈ Чат https://t.me/yeahub_community

#frontend #sentry #react
📎 Sentry: мониторинг и отслеживание ошибок. Установка self-hosted версии

Статья на Timeweb рассказывает, как установить и настроить Sentry для мониторинга и отслеживания ошибок на сервере. Она описывает пошаговую установку Sentry на сервере с помощью Docker, настройку проекта для захвата ошибок, интеграцию с различными языками программирования и системами, а также способы управления уведомлениями об ошибках.

🔗 Статья | 👍 Платформа

#backend #grafana #prometheus #nest
📎 Grafana и Prometheus: Инструменты для мониторинга и визуализации данных

👀 Prometheus — это система мониторинга и сбора метрик с открытым исходным кодом. Она была разработана в SoundCloud и сейчас является частью CNCF (Cloud Native Computing Foundation).

Основные особенности:
- Модель сбора данных: Prometheus активно "опрашивает" (scrapes) метрики с заранее настроенных источников.
- Хранилище временных рядов: Все данные сохраняются в виде временных рядов, что позволяет эффективно обрабатывать метрики за определенные интервалы времени.
- Язык запросов PromQL: Удобный язык для работы с метриками, позволяющий фильтровать и агрегировать данные.
- Множество экспортеров: Для интеграции с системами (например, Node Exporter для серверов, Blackbox Exporter для проверки доступности).

Пример использования Prometheus:
- Мониторинг CPU, памяти и дискового пространства серверов.
- Сбор данных о количестве запросов, ошибках и задержках в веб-приложениях.

🖥 Grafana — это инструмент для визуализации данных и построения интерактивных дашбордов. Он поддерживает подключение к различным источникам данных, включая Prometheus, MySQL, Elasticsearch и многие другие.

Основные возможности:
- Визуализация: Создание графиков, таблиц и других визуальных элементов.
- Настраиваемые дашборды: Гибкость в отображении данных для разных целей.
- Алерты: Настройка уведомлений на основе заданных условий.

Grafana используется для:
- Построения дашбордов производительности серверов.
- Отображения состояния приложений и метрик из Prometheus.
- Мониторинга бизнес-показателей в реальном времени.

❓ Как это работает вместе?

Сбор метрик с помощью Prometheus:
- Prometheus периодически собирает данные с источников (например, серверов, баз данных, приложений).
- Эти данные сохраняются в виде временных рядов.

Визуализация в Grafana:
- Grafana подключается к Prometheus как к источнику данных.
- На основе собранных метрик вы создаете дашборды и графики, чтобы видеть общую картину.

🔗 Статья | 👍 Платформа

#frontend #template #javascript
📈 Шаблоны для эффективной работы с DOM с помощью <template>

В современных веб-приложениях важны производительность и удобство работы с DOM. Элемент <template> позволяет создавать невидимые шаблоны, которые можно многократно использовать для динамической генерации интерфейса.


📌 Что это такое?

Элемент <template> — это контейнер для HTML-разметки, которая не отображается на странице сразу, а существует как часть DOM. Она активируется только при явном вызове через JavaScript. Это полезно для создания однотипных элементов, таких как карточки, списки, модальные окна.


📌 Как с этим работать?

📖Определение шаблона: внутри <template> можно хранить HTML-код, включая стили и скрипты.
📖Клонирование: с помощью метода .content.cloneNode() шаблон копируется и добавляется в DOM.
📖Инкапсуляция логики: шаблоны можно использовать с Web Components, что делает код более модульным и переиспользуемым.


📌 Где применяется?

📖Компоненты пользовательского интерфейса: карточки товаров, списки задач.
📖Повышение производительности: шаблоны рендерятся быстрее, так как не требуют повторной работы браузера с DOM.
📖Работа с Web Components: для создания модульных элементов интерфейса.

Пример:

<template id="card-template">
  <div class="card">
    <h3></h3>
  </div>
</template>
<script>
  const template = document.querySelector('#card-template').content;
  const clone = template.cloneNode(true);
  clone.querySelector('h3').textContent = "Заголовок";
  document.body.appendChild(clone);
</script>

👍 Платформа

#browser #rendering #optimization

Как работает рендеринг веб-страницы в браузере?

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

1️⃣ Парсинг: создание DOM и CSSOM
Вместе они описывают структуру страницы и стили для каждого элемента.

2️⃣ Создание Render Tree
На основе DOM и CSSOM создается Render Tree, где браузер определяет, какие элементы должны быть отображены и как они выглядят.

3️⃣ Layout
Браузер вычисляет ширину, высоту и координаты каждого элемента, начиная с корневого <html> и постепенно проходя все дочерние узлы. Этот процесс называют компоновкой.

4️⃣ Paint
После определения размеров и позиций браузер решает, в каком порядке рисовать элементы (например, с учетом z-index). Для этого создаются Paint Records — инструкции для отрисовки.

5️⃣ Compositing
Элементы, которые находятся на разных слоях (например, с opacity или transform), объединяются в единую картинку. Здесь браузер использует аппаратное ускорение: часть задач передается на видеокарту (GPU). Это ускоряет работу интерфейсов, особенно для анимаций.


✅ Как оптимизировать рендеринг?

- Аппаратное ускорение (GPU): Используется для сложных графических операций (анимация, фильтры)

- FLIP-анимации: Позволяют избегать перерасчета layout. Элемент сразу помещается в финальную точку, а визуально стартует с помощью transform

- Свойство will-change: Заранее выделяет ресурсы для элементов, которые будут изменяться

Зачем это знать?

1. Избегать ненужных перерасчетов layout
2. Писать оптимизированный код для интерфейсов
3. Улучшать пользовательский опыт за счет повышения скорости работы страниц

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

👍 Платформа

#JEST #WebdriverIO #ReactTestingLibrary #unitTesting

🖥 Интересуетесь тестированием в React?

Это видео охватывает все ключевые аспекты тестирования React-приложений: от теории до практических примеров. Разбираются юнит-тесты с JEST, асинхронное тестирование, работа с React Testing Library и Redux Toolkit, а также e2e тесты с WebdriverIO. Особое внимание уделено интеграционному тестированию, скриншотным тестам и паттерну PageObject.

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

✔️ Смотреть

👍 Платформа

#javascript #arraymethods

❓ Находитесь на этапе изучения JavaScript?

Cоветую к прочтению данную статью. Она освещает 10 ключевых методов работы с массивами в JavaScript, таких как forEach(), map(), filter(), reduce(), и других.

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

В ней вы сможете найти советы по повышению производительности и правильной обработке ошибок для создания более гибкого и эффективного кода.

✔️ Читать

👍 Платформа

#javascript #book

📘 Паттерны проектирования jаvascript

Практическое руководство по применению популярных паттернов проектирования в JavaScript, таких как:
Модуль, Наблюдатель, Стратегия, Фабрика и Декоратор.

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


✏️ Книга помогает:

🔸Изучить популярные паттерны проектирования и их применение в JavaScript.
▫️Улучшить структуру и читаемость кода.
🔸Решать типичные задачи разработки с помощью проверенных решений.
▫️Повышает эффективность работы с кодом, облегчая его поддержку и расширение.
🔸Помогает улучшить навыки рефакторинга и оптимизации.


Книга в комментариях ⬇️

👍 Платформа

❓Хочешь освоить Flexbox и научиться строить адаптивные макеты?

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

🔗 Ссылка

👍 Платформа

#graphql #rest #backend

💬 Зачем backend-разработчику знать про REST и GraphQL?

В мире веб-разработки API — это связующее звено между фронтендом и бэкендом. Два популярных подхода для их создания — REST и GraphQL. Разберёмся, что они собой представляют и когда их лучше использовать.


📌 REST

REST (Representational State Transfer) — это архитектурный стиль, который использует HTTP-протокол для обмена данными.
Принципы REST:
- Использование стандартных методов HTTP: GET, POST, PUT, DELETE.
- Структура запросов: /users, /users/1, /posts/2/comments.
- Сервер возвращает фиксированные данные в формате JSON или XML.

Плюсы:
- Простота реализации.
- Огромное сообщество и множество готовых решений.
- Подходит для большинства задач.

Минусы:
- Перегрузка запросов: клиент может получать больше данных, чем нужно.
- Неудобно управлять сложными зависимостями (например, получение связанных данных).


📌 GraphQL

GraphQL — это язык запросов, который позволяет клиенту получать только те данные, которые ему нужны.
Особенности:
- Клиент сам формирует структуру запроса.
- Данные возвращаются ровно в том виде, как запрошено.
- Используется единая точка входа (/graphql).

Плюсы:
- Высокая гибкость: клиент получает только необходимые данные.
- Удобно для приложений с большим количеством взаимосвязанных данных.
- Интерактивные инструменты для работы с API (например, GraphiQL).

Минусы:
- Сложнее настроить: требуется больше времени на проектирование схемы.
- Повышенные требования к серверу: из-за гибкости запросов можно перегрузить систему.


Как выбрать?

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

👍 Платформа

#IT #News

🎤 XLand-MiniGrid

Российские учёные представили уникальную разработку — открытую виртуальную среду XLand-MiniGrid, которая значительно ускоряет обучение искусственного интеллекта (ИИ) с использованием методов контекстного обучения с подкреплением. Эта платформа способна выполнять миллиарды операций в секунду, существенно опережая существующие аналоги. Важно, что она доступна для разработчиков со всего мира, что способствует глобальному прогрессу в области ИИ.


📎Что такое XLand-MiniGrid?

Среда разработана лабораторией T-Bank AI Research и институтом AIRI при поддержке студентов ведущих российских вузов, таких как МФТИ, Сколтех и Университет Иннополис. Она позволяет обучать ИИ принимать решения и выполнять новые задачи, используя подсказки и контекст вместо долгого обучения с нуля. Это делает её полезной для сфер, где требуется быстрая адаптация, например, управления роботами, автономным транспортом и персонализированных рекомендаций.


📎Международное признание

Решение уже активно используют исследователи из Google DeepMind, Калифорнийского университета в Беркли и Оксфорда. Его значимость подтверждается приглашением представить научную статью на престижной конференции NeurIPS 2024, которая пройдет в декабре в Канаде.


📎Основные преимущества

XLand-MiniGrid отличается высокой производительностью и открытостью:
- Позволяет моделям ИИ выполнять триллионы взаимодействий за считанные дни, что ускоряет тестирование гипотез.
- Содержит 100 миллиардов примеров действий в 30 тысячах задач.
- Основана на технологии JAX, обеспечивающей высокую скорость выполнения операций.
- Поддерживает гибкость в создании задач, помогая адаптировать ИИ к разным условиям.


📎Вклад в развитие ИИ

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

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

🔗 Источник

👍 Платформа

#JavaScript #WebSocket #HTTP2

Как работает WebSocket и HTTP/2 + SSE. Что выбрать?

Современные веб-приложения требуют эффективной и безопасной коммуникации между клиентом и сервером. Среди популярных технологий выделяются WebSocket, HTTP/2 и SSE. Разберем их особенности и поможем определиться с выбором.


✔️WebSocket: быстрые двусторонние соединения

WebSocket обеспечивает двустороннюю связь между браузером и сервером через постоянное соединение.

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


✔️HTTP/2 + SSE: асинхронные данные и оптимизация

HTTP/2 предоставляет технологию Server Push, позволяющую серверу отправлять данные в клиентский кэш без запроса. SSE (Server-Sent Events) работает через асинхронные однонаправленные соединения:

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


❓ Как выбрать?

Выбор протокола зависит от задач проекта:
- Если нужна двусторонняя связь в реальном времени — используйте WebSocket.
- Для передачи потоковых данных или серверных обновлений с меньшей сложностью — HTTP/2 + SSE.

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

🔗 Источник

👍 Платформа

#fsd

✏️ Feature-Sliced Design (FSD)

FSD — методология для упрощения работы с крупными приложениями. Она структурирует проект, деля его на независимые слои, что повышает понятность, поддерживаемость и масштабируемость.


➡️ Основные слои:

1. App: глобальные настройки приложения.
2. Entities: бизнес-сущности и их логика.
3. Features: пользовательские действия (например, логин).
4. Shared: переиспользуемые компоненты и утилиты.
5. Pages: страницы, комбинирующие слои.
6. Widgets: крупные UI-блоки.
7.Processing (опционально): сложные процессы (например, оформление заказа).


➡️ Преимущества:

- Простота навигации.
- Четкое разделение ответственности.
- Удобство тестирования.
- Минимизация ошибок при изменениях.


Заключение

FSD упрощает разработку, поддержание и масштабирование больших проектов благодаря модульности и строгой структуре.

🔗 Статья

👍 Платформа

#IT #News

🎤 Прорыв в области искусственного интеллекта и улучшение безопасности данных

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


📎 Прорыв в вычислительных мощностях для ИИ от Cerebras

Компания Cerebras, известная своими инновациями в области вычислительных платформ для ИИ, представила новый процессор, который обещает значительно улучшить производительность по сравнению с решениями крупнейших мировых облачных провайдеров. Этот новый процессор под названием Cerebras Inference способен обрабатывать данные в 75 раз быстрее AWS и в 32 раза быстрее Google, когда речь идет о модели Llama 3.1 с 405 миллиардами параметров.

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


📎 AWS анонсирует новый инструмент для восстановления после кибератак

Еще одной важной новостью стало анонсирование нового инструмента от Amazon Web Services (AWS), направленного на помощь компаниям в восстановлении после кибератак. Этот инструмент значительно упрощает процесс восстановления данных и может быть интегрирован в существующие системы безопасности организаций.

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

👉 Новости 👉 Платформа

#frontend

💬 Как работает JS: WebRTC и механизмы P2P-коммуникаций ?

Одним из самых интересных и мощных инструментов для создания приложений с реальным временем передачи данных является WebRTC (Web Real-Time Communication). Этот API позволяет веб-браузерам и мобильным приложениям осуществлять прямую связь между пользователями без необходимости в сервере-прокси, что идеально подходит для приложений с видеозвонками, чатами и передачей файлов.


📌 Что такое WebRTC?

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

WebRTC включает в себя три основные технологии:

1. getUserMedia — доступ к камере и микрофону.
2. RTCPeerConnection — установление прямой связи между двумя клиентами.
3. RTCDataChannel — передача данных между двумя пользователями (например, для отправки файлов).

📌 Как работают механизмы P2P?

В основе WebRTC лежат механизмы peer-to-peer (P2P), что означает, что два устройства могут обмениваться данными напрямую друг с другом, минуя промежуточные серверы. Когда пользователь инициирует звонок, WebRTC создает так называемую "сессию", где оба устройства обмениваются необходимой информацией для установки безопасного соединения. Это включает в себя обмен SDP (Session Description Protocol) и ICE (Interactive Connectivity Establishment), чтобы гарантировать, что соединение будет работать даже за фаерволами и NAT (Network Address Translation).


📌 Этапы работы WebRTC:

1. Сигнализация — на этом этапе происходит обмен информацией между двумя пользователями для установления соединения. Обычно сигнальные сообщения передаются через сервер, который помогает узнать, как соединить устройства (например, через WebSocket).

2. Обмен данными — после установления соединения WebRTC использует RTCPeerConnection для передачи аудио, видео или данных между клиентами.

3. Закрытие сессии — когда связь больше не нужна, соединение закрывается, и все ресурсы освобождаются.


📌 Преимущества P2P

- Меньше задержек и зависимостей от серверов. P2P-соединения обычно гораздо быстрее, поскольку данные передаются напрямую.
- Экономия ресурсов. Снижается нагрузка на серверы, поскольку они не принимают участие в передаче данных.
- Удобство для пользователей. Отсутствие серверов-посредников делает использование таких технологий доступным и простым.


📌 Где используется WebRTC?

- Видеоконференции: такие сервисы как Google Meet, Zoom, Skype используют WebRTC для реализации прямой связи.
- Чаты и обмен файлами: WebRTC позволяет отправлять текстовые сообщения, изображения и видео в реальном времени.
- Онлайн-игры: некоторые игры используют P2P-соединения для синхронизации действий между игроками без задержек.

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

🔗 Статья

👉 Новости 👉 Платформа