У нас появилась предложка!

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

Теперь вы можете прислать нам ваш авторский контент или материалы, которые вам показались интересными. Мы просмотрим каждое ваше сообщение и если это подходит под тематику нашего канала и не нарушает правила, опубликуем в канале. Анонимно или нет — на ваш выбор!

Эффект выгорающей кинопленки

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

Посмотреть код можно здесь: https://codepen.io/kiranpate1/pen/MWMGKdv

#codepen #css #javascript

blur в JavaScript: что это такое

Событие blur не стоит путать с CSS-свойством. В JavaScript оно срабатывает на элементах, которые могут получать фокус в случаях, когда эти элементы фокус теряют. Например, пользователь «ушёл» с этого элемента и переключил внимание на что-то другое (другой элемент, окно или вкладку).

Когда происходит blur:

1. Клик мышью в другое место.
2. Переход клавишей Tab.
3. Смена вкладки или окна.

Когда может пригодиться blur:

— Валидация «по уходу». Проверить введённый e-mail или телефон сразу после того, как пользователь перестал редактировать поле.
— Скрытие подсказок. Прятать всплывающие хинты, когда внимание пользователя ушло с элемента.
— Автосохранение. Сохранять черновик, как только заголовок заметки потерял фокус.

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

<input id="email" placeholder="Введите e-mail" />

<script>
  const emailInput = document.getElementById('email');

  emailInput.addEventListener('blur', () => {
    console.log('Поле e-mail потеряло фокус — проверяем данные.');
    // Здесь может быть ваша валидация или отправка на сервер
  });
</script>

Важные нюансы:

— blur не всплывает вверх по дереву DOM. Если нужно отследить потерю фокуса на контейнере, слушайте событие focusout: оно ведёт себя так же, но всплывает.
— Порядок событий. Когда элемент теряет фокус, сначала срабатывает focusout, затем blur. Это редко важно, но полезно знать при сложной логике.

#простымисловами #javascript

Курс: Основы API

Забирайте базовый курс по API. Тут разбирают, что из себя представляет API, как работает и зачем он нужен. Также рассмотрят примеры использования, способы вызова и тенденции развития.

Понимание принципов работы API становится всё более актуальным для карьеры в индустрии разработки ПО. На курсе вы изучите некоторые фундаментальные концепции API и определите общую модель того, как он используется: https://stepik.org/course/124947/promo?search=3345883703

#инструменты #курс

Проверка совместимости JavaScript-кода с окружением за секунды

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

Запустите его и он покажет, что будет работать, например, с Node.js, а что придется переписать. Сейчас инструмент поддерживает Node.js, Deno, Bun, Cloudflare Workers и другие среды выполнения.

#инструменты #javascript

Copilot сильно заблуждается: как ИИ убивает код

GitHub Copilot считается помощником, который ускоряет разработку. Но что, если это просто старательный новичок, который не понимает контекста и вносит сомнительные правки?

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

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

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

А какого мнения о Copilot вы? Согласны с автором? Поделитесь своими мыслями в комментариях.

#copilot #мнение

Быстро поднятое не считается упавшим

От подписчика: Как работают 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