Telegram Web Link
От подписчика: Как работают 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
👍146
Docker для инженеров: 6 приёмов, которые выведут вас за пределы docker build

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

#бэкенд #devops #docker
🔥6
От монолита к микросервисам: реальный кейс развёртывания сайта на Spring Boot + Angular SSR с Docker и Nginx

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

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

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

#java #docker #springboot #angular #nginx
🔥4💩1
MVP на Flask, а платите как за стартап: как «простое» приложение вышло на $2000 в месяц

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

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

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

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

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

#фронтенд
😁17
This media is not supported in your browser
VIEW IN TELEGRAM
буквально: *у нас есть Железный человек дома*

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

@your_tech
👍246🔥2
#простымисловами: Что такое 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 #фронтенд
👍226
Одна переменная на три мира: как синхронизировать значение между HTML, CSS и JavaScript

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

#фронтенд #pug #css #javascript
🔥8
This media is not supported in your browser
VIEW IN TELEGRAM
Video To ASCII Art

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

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

#codepen
🔥10👍71
CORS от А до Я: как не ломать фронт ради бэкенда

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

#cors
👍7🔥2
Чек-лист для проверки доступности вашего сайта для всех пользователей

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

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

#тестирование #лучшиепрактики #интерфейс
👍8🔥3
Революция в условном рендеринге React

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

#react
👍12👎7🗿4🤣2
Бу! Испугался? Не бойся...
😁45👍41
Перенаправления в Angie: return, rewrite и примеры их применения

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

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

#бэкенд #angie
👍2🔥1
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
6👍4🤩1
Интересный codepen-проект: Book Writing Animation

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

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

#codepen
👍9🔥41😁1
Краткая история JavaScript

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

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

#javascript #историяit
👍8🔥5
CSS-стилизация курсоров нового уровня

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

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

#фронтенд #css #ux
🔥8💩42🤔1🤣1
Forwarded from Код найма
Хватит искать работу в одиночку!

Ты крутой айтишник, но поиск работы превращается в квест: бесконечные резюме, где важны не навыки, а кейворды, десятки собеседований и постоянный стресс. Знакомо? Всё это выматывает и демотивирует. Мы тебя понимаем — и готовы поддержать!

Команда Tproger открывает первое реалити-шоу в Телеграм о поиске работы — «Код найма».

Вместе с опытными менторами ты пройдешь все этапы найма:

➡️ Прокачаешь резюме так, чтобы его заметили
➡️ Научишься проходить собеседования без волнения
➡️ Получишь честную обратную связь от рекрутеров
➡️ И, главное, дойдёшь до оффера в компании мечты!

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

Хочешь стать героем нашего реалити и получить шанс найти работу мечты?

✍️ Заполняй анкету

Мы выберем трёх участников, которым поможем пройти весь путь до оффера.

Присоединяйся к «Коду найма» — и пусть твой следующий оффер станет началом новой жизни!
Please open Telegram to view this post
VIEW IN TELEGRAM
2🔥1
2025/07/11 18:53:58
Back to Top
HTML Embed Code: