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

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

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

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

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

#бэкенд #angie