От подписчика: Как работают generics в TypeScript на реальном примере

Вам когда-нибудь приходилось писать универсальную функцию, которая работает с разными типами данных — и при этом хочется сохранить строгую типизацию? Именно для таких случаев в TypeScript есть generics. Концепция, знакомая по Java, C#, Kotlin и даже Rust или Go, здесь реализована лаконично и мощно.

🔍 Когда это действительно нужно

Представим задачу: есть сервис генерации изображений. В зависимости от исполнителя (например, OpenAI или DeepAI) параметры запроса могут отличаться. Чтобы избежать ошибок и сделать код устойчивым к изменениям, можно связать тип исполнителя с набором параметров с помощью generics.

📦 Типы параметров:

export type OpenAIImageGenerationType = {
  contentId: string;
  buffer: Buffer;
  prompt: string;
};

export type DeepAIImageGenerationType = {
  contentId: string;
  gender: GenderType;
  n: number;
};

🔁 Соответствие между исполнителем и типом параметров:

export enum GenerationExecutorTypeEnum {
  DEEP_IMAGE_GENERATION = 'deep_image_generation',
  OPEN_IMAGE_GENERATION = 'open_image_generation'
}

export type ExecutorToParamsMap = {
  [GenerationExecutorTypeEnum.OPEN_IMAGE_GENERATION]: OpenAIImageGenerationType;
  [GenerationExecutorTypeEnum.DEEP_IMAGE_GENERATION]: DeepAIImageGenerationType;
};

🧠 И теперь — самое интересное. С помощью generics можно автоматически определять нужный тип параметров при создании задачи:

export type GenerationJobType<E extends keyof ExecutorToParamsMap> = {
  name: string;
  executor: E;
  params: ExecutorToParamsMap[E];
  timeout?: number;
};

📌 Пример использования в методе сервиса:

class JobImageGenerationService {
  async createGenerationJob<E extends keyof ExecutorToParamsMap>(
    incomingJob: GenerationJobType<E>
  ): Promise<void> {
    // Тут мы уверены, что переданы нужные параметры под нужного исполнителя
  }
}

📎 А вот и вызов метода:

await this.jobImageGenerationService.createGenerationJob({
  name: "generate_image",
  executor: GenerationExecutorTypeEnum.DEEP_IMAGE_GENERATION,
  params: {
    contentId,
    gender,
    n,
  }
});

Если параметры окажутся не теми, TypeScript подскажет об ошибке ещё до запуска кода.

👨‍💻 Полный пример можно посмотреть в песочнице.

🎯 Вывод

Generics в TypeScript — это способ писать более гибкий и надёжный код. Если освоите эту концепцию, работа с типами станет не только проще, но и безопаснее.

Прислал: @IlyaIvanchikov

Вы также можете прислать свои материалы в нашу предложку!

#отподписчика #typescript

Docker для инженеров: 6 приёмов, которые выведут вас за пределы docker build

Если вы используете Docker только для запуска контейнеров, пора углубиться. В статье — шесть практик, которые помогут выйти за рамки docker build и научат думать как инженер.

#бэкенд #devops #docker

От монолита к микросервисам: реальный кейс развёртывания сайта на Spring Boot + Angular SSR с Docker и Nginx

У нас на сайте появилась статья, где автор делится практическим опытом перехода от монолитного приложения к микросервисной архитектуре с использованием Spring Boot и Angular SSR. В ней подробно описаны этапы:

— настройки Docker Compose;
— интеграции Nginx;
— настройки HTTPS;
— и решения проблем с CORS.

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

#java #docker #springboot #angular #nginx

MVP на Flask, а платите как за стартап: как «простое» приложение вышло на $2000 в месяц

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

В этой статье — путь от MVP на Flask до продакшна с Kubernetes, балансировкой и мониторингом, который стоит как SaaS среднего уровня.

А сколько стоит поддержка вашего проекта?

#бэкенд #инфраструктура #devops

​Как выучить CSS и HTML и стать фронтендером бесплатно, не покупая курсы от онлайн-школ

Можно ли выучить CSS и HTML и стать фронтендером бесплатно, не покупая курсы от онлайн-школ? Узнали у экспертов, какими источниками пользоваться, чтобы начать карьеру во фронтенде: https://tproger.ru/articles/kak-besplatno-vyuchit-html-i-css

#фронтенд

буквально: *у нас есть Железный человек дома*

Разраб сделал интерфейс для интерактивной работы с БД почти как у Тони Старка. Чуть-чуть лагает, конечно, но завораживает!

@your_tech

#простымисловами: Что такое Web Worker

Web Worker — это способ запустить тяжёлую задачу в браузере в фоновом потоке, не тормозя интерфейс.

Зачем он нужен

В браузере весь ваш JavaScript обычно работает в одном потоке — основном.

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

Чтобы избежать этого, тяжёлую работу можно вынести в Web Worker. Тогда основная страница продолжит работать плавно.

Как это работает

Вы создаёте отдельный файл со скриптом, который будет работать в фоне:

// worker.js
self.onmessage = function(event) {
  const result = event.data * 2;
  self.postMessage(result);
};

А в основном коде:

const worker = new Worker('worker.js');

worker.onmessage = (event) => {
  console.log('Результат от воркера:', event.data);
};

worker.postMessage(21); // отправляем 21, получаем 42

Всё общение — через postMessage и onmessage. Вы как бы обмениваетесь сообщениями между потоками.

Что можно и нельзя делать в Web Worker:

— Нельзя напрямую работать с DOM (document, window, элементы страницы).
— Нельзя использовать alert, prompt, confirm.

Зато можно делать:

— Математические расчёты.
— Обработку больших массивов.
— Парсинг JSON, XML.
— Декомпрессию данных.
— Обмен сообщениями с сервером (через fetch, WebSocket).

#webworker #фронтенд

Одна переменная на три мира: как синхронизировать значение между HTML, CSS и JavaScript

В статье Крис Койер показывает, как установить переменную size в Pug и передать её одновременно в HTML (для генерации сетки), CSS (через --size для настройки grid-template-columns) и JavaScript (через window.size для навигации по стрелкам). Простой приём, который позволяет управлять интерфейсом из одного источника данных.

#фронтенд #pug #css #javascript

Как работает мой код:

Video To ASCII Art

Энтузиаст сделал проект, который превращает короткие видео в ASCII-арт. Проект реализован с помощью CSS и JavaScript.

По ссылке можно посмотреть код проекта и попробовать воспроизвести различные видео: https://codepen.io/konstantindenerz/pen/YzgRQZj

#codepen

CORS от А до Я: как не ломать фронт ради бэкенда

Ошибка CORS — один из самых частых стоперов на стыке фронта и API. В статье по шагам разбирается, зачем вообще нужен механизм Cross-Origin, какие бывают типы запросов, как устроен preflight и в чём чаще всего ошибаются разработчики. Плюс — готовые конфиги для разных серверов, чтобы настроить CORS правильно с первого раза.

#cors

Чек-лист для проверки доступности вашего сайта для всех пользователей

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

Несложное, но большое дело — проверить свой сайт на выполнение всех пунктов.

#тестирование #лучшиепрактики #интерфейс

Революция в условном рендеринге React

Если вам надоело писать if, && и ? : в каждом React-компоненте, эта статья — находка. Здесь показано, как использовать декларативные абстракции (<Show>, <Switch>, <Match>) в React, вдохновившись стилем SolidJS, чтобы сделать условный рендер читаемым и масштабируемым. А ещё — как эти паттерны можно адаптировать под ваш собственный фреймворк.

#react

Бу! Испугался? Не бойся...

Перенаправления в Angie: return, rewrite и примеры их применения

Сколько времени вы тратите на настройку location, rewrite и редиректы в Nginx? Angie упрощает это до пары строк: return 301 для HTTPS, rewrite с регулярками и даже спец-код 444 для «отсечения ботов». Готовьтесь управлять запросами элегантно и безопасно — без избыточной конфигурации.

Все подробности — в статье.

#бэкенд #angie

CSS Custom Highlight API: стилизуйте текст, не ломая DOM

Представьте, что выделять важные фразы можно не вставляя <span>, да ещё с управлением из JavaScript. CSS Custom Highlight API позволяет создавать стилизованные диапазоны текста почти без изменений в DOM-структуре. От ::selection до пользовательских псевдо-элементов стили — всё настраивается через JS и CSS, а документация показывает примеры применения и текущую поддержку браузеров.

Подробности по ссылке: https://tproger.ru/articles/css-custom-highlight-api

#фронтенд #css #api

Интересный codepen-проект: Book Writing Animation

Анимация набора текста сделана при помощи пакета typewriter-effect. Он позволяет создать зрелищные и динамичные эффекты печати текста на веб-страницах.

Исходники: https://codepen.io/wakana-k/pen/bGxaoNv

#codepen

Краткая история JavaScript

В этом году JavaScript исполняется 30 лет. За это время язык прошёл путь от 10‑дневного прототипа до платформы, питающей серверы, приложения и AI-инструменты.

В статье — ключевые вехи эволюции: появление XMLHttpRequest, Node.js, TypeScript, Deno, Bun и даже планы TS на Go. Здесь вы получите не просто хронологию, а понимание, как JavaScript меняет мир разработки.

#javascript #историяit

CSS-стилизация курсоров нового уровня

Представьте не просто смену стрелки, а настоящий динамичный указатель: текст внутри, плавные анимации, фильтры и смена состояния при клике — всё это возможно благодаря JavaScript поверх CSS.

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

#фронтенд #css #ux