blur в JavaScript: что это такое
Событие
Когда происходит blur:
1. Клик мышью в другое место.
2. Переход клавишей Tab.
3. Смена вкладки или окна.
Когда может пригодиться blur:
— Валидация «по уходу». Проверить введённый e-mail или телефон сразу после того, как пользователь перестал редактировать поле.
— Скрытие подсказок. Прятать всплывающие хинты, когда внимание пользователя ушло с элемента.
— Автосохранение. Сохранять черновик, как только заголовок заметки потерял фокус.
Как это выглядит в коде:
Важные нюансы:
— blur не всплывает вверх по дереву DOM. Если нужно отследить потерю фокуса на контейнере, слушайте событие
— Порядок событий. Когда элемент теряет фокус, сначала срабатывает
#простымисловами #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
👍3🔥3
Курс: Основы API
Забирайте базовый курс по API. Тут разбирают, что из себя представляет API, как работает и зачем он нужен. Также рассмотрят примеры использования, способы вызова и тенденции развития.
Понимание принципов работы API становится всё более актуальным для карьеры в индустрии разработки ПО. На курсе вы изучите некоторые фундаментальные концепции API и определите общую модель того, как он используется: https://stepik.org/course/124947/promo?search=3345883703
#инструменты #курс
Забирайте базовый курс по API. Тут разбирают, что из себя представляет API, как работает и зачем он нужен. Также рассмотрят примеры использования, способы вызова и тенденции развития.
Понимание принципов работы API становится всё более актуальным для карьеры в индустрии разработки ПО. На курсе вы изучите некоторые фундаментальные концепции API и определите общую модель того, как он используется: https://stepik.org/course/124947/promo?search=3345883703
#инструменты #курс
🔥8❤4
Проверка совместимости JavaScript-кода с окружением за секунды
Runtime-compat — это инструмент, который позволяет проверить, какие фичи вашего кода поддерживаются в разных средах выполнения, а какие — нет.
Запустите его и он покажет, что будет работать, например, с Node.js, а что придется переписать. Сейчас инструмент поддерживает Node.js, Deno, Bun, Cloudflare Workers и другие среды выполнения.
#инструменты #javascript
Runtime-compat — это инструмент, который позволяет проверить, какие фичи вашего кода поддерживаются в разных средах выполнения, а какие — нет.
Запустите его и он покажет, что будет работать, например, с Node.js, а что придется переписать. Сейчас инструмент поддерживает Node.js, Deno, Bun, Cloudflare Workers и другие среды выполнения.
#инструменты #javascript
🔥4
Forwarded from Точка входа в программирование
Copilot сильно заблуждается: как ИИ убивает код
GitHub Copilot считается помощником, который ускоряет разработку. Но что, если это просто старательный новичок, который не понимает контекста и вносит сомнительные правки?
Автор этой статьи считает, что Copilot не так уж хорош, как его позиционируют и скорее вредит, чем помогает. Здесь — разбор популярных заблуждений:
— Copilot не знает, как устроен ваш проект, и может нарушить архитектурные решения.
— Он не объясняет свои действия — ни вам, ни вашей команде.
— Его код выглядит правдоподобно, но это создаёт ложное чувство надёжности.
Такой ИИ может быть полезным инструментом, но он точно не заменит понимание кода, опыт команды и живую коммуникацию. Особенно на проектах, где важны долгосрочная поддержка и архитектурная целостность.
А какого мнения о Copilot вы? Согласны с автором? Поделитесь своими мыслями в комментариях.
#copilot #мнение
GitHub Copilot считается помощником, который ускоряет разработку. Но что, если это просто старательный новичок, который не понимает контекста и вносит сомнительные правки?
Автор этой статьи считает, что Copilot не так уж хорош, как его позиционируют и скорее вредит, чем помогает. Здесь — разбор популярных заблуждений:
— Copilot не знает, как устроен ваш проект, и может нарушить архитектурные решения.
— Он не объясняет свои действия — ни вам, ни вашей команде.
— Его код выглядит правдоподобно, но это создаёт ложное чувство надёжности.
Такой ИИ может быть полезным инструментом, но он точно не заменит понимание кода, опыт команды и живую коммуникацию. Особенно на проектах, где важны долгосрочная поддержка и архитектурная целостность.
А какого мнения о Copilot вы? Согласны с автором? Поделитесь своими мыслями в комментариях.
#copilot #мнение
👍18❤5🤔3🤣1
This media is not supported in your browser
VIEW IN TELEGRAM
Быстро поднятое не считается упавшим
😁37❤1
От подписчика: Как работают generics в TypeScript на реальном примере
Вам когда-нибудь приходилось писать универсальную функцию, которая работает с разными типами данных — и при этом хочется сохранить строгую типизацию? Именно для таких случаев в TypeScript есть generics. Концепция, знакомая по Java, C#, Kotlin и даже Rust или Go, здесь реализована лаконично и мощно.
🔍 Когда это действительно нужно
Представим задачу: есть сервис генерации изображений. В зависимости от исполнителя (например, OpenAI или DeepAI) параметры запроса могут отличаться. Чтобы избежать ошибок и сделать код устойчивым к изменениям, можно связать тип исполнителя с набором параметров с помощью generics.
📦 Типы параметров:
🔁 Соответствие между исполнителем и типом параметров:
🧠 И теперь — самое интересное. С помощью generics можно автоматически определять нужный тип параметров при создании задачи:
📌 Пример использования в методе сервиса:
📎 А вот и вызов метода:
Если параметры окажутся не теми, TypeScript подскажет об ошибке ещё до запуска кода.
👨💻 Полный пример можно посмотреть в песочнице.
🎯 Вывод
Generics в TypeScript — это способ писать более гибкий и надёжный код. Если освоите эту концепцию, работа с типами станет не только проще, но и безопаснее.
Прислал: @IlyaIvanchikov
Вы также можете прислать свои материалы в нашу предложку!
#отподписчика #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
👍14❤6
От монолита к микросервисам: реальный кейс развёртывания сайта на Spring Boot + Angular SSR с Docker и Nginx
У нас на сайте появилась статья, где автор делится практическим опытом перехода от монолитного приложения к микросервисной архитектуре с использованием Spring Boot и Angular SSR. В ней подробно описаны этапы:
— настройки Docker Compose;
— интеграции Nginx;
— настройки HTTPS;
— и решения проблем с CORS.
Также рассматриваются способы защиты от ботов и оптимизации конфигурации для стабильной работы сайта.
#java #docker #springboot #angular #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
Многие думают, что простой стек = дешёвое обслуживание. Но как только появляются очереди, вебсокеты, графики и AI — даже скромный проект обрастает сервисами и инфраструктурой, а за облачные ресурсы внезапно уходит больше, чем на саму разработку.
В этой статье — путь от MVP на Flask до продакшна с Kubernetes, балансировкой и мониторингом, который стоит как SaaS среднего уровня.
А сколько стоит поддержка вашего проекта?
#бэкенд #инфраструктура #devops
🔥7
Как выучить CSS и HTML и стать фронтендером бесплатно, не покупая курсы от онлайн-школ
Можно ли выучить CSS и HTML и стать фронтендером бесплатно, не покупая курсы от онлайн-школ? Узнали у экспертов, какими источниками пользоваться, чтобы начать карьеру во фронтенде: https://tproger.ru/articles/kak-besplatno-vyuchit-html-i-css
#фронтенд
Можно ли выучить CSS и HTML и стать фронтендером бесплатно, не покупая курсы от онлайн-школ? Узнали у экспертов, какими источниками пользоваться, чтобы начать карьеру во фронтенде: https://tproger.ru/articles/kak-besplatno-vyuchit-html-i-css
#фронтенд
😁17
Forwarded from Представляешь,
This media is not supported in your browser
VIEW IN TELEGRAM
буквально: *у нас есть Железный человек дома*
Разраб сделал интерфейс для интерактивной работы с БД почти как у Тони Старка. Чуть-чуть лагает, конечно, но завораживает!
@your_tech
Разраб сделал интерфейс для интерактивной работы с БД почти как у Тони Старка. Чуть-чуть лагает, конечно, но завораживает!
@your_tech
👍24❤6🔥2
#простымисловами: Что такое Web Worker
Web Worker — это способ запустить тяжёлую задачу в браузере в фоновом потоке, не тормозя интерфейс.
Зачем он нужен
В браузере весь ваш JavaScript обычно работает в одном потоке — основном.
И если вы запускаете что-то тяжёлое (например, сложные вычисления или работу с большими данными), страдает весь интерфейс: кнопки не нажимаются, анимации замирают, скролл лагает.
Чтобы избежать этого, тяжёлую работу можно вынести в Web Worker. Тогда основная страница продолжит работать плавно.
Как это работает
Вы создаёте отдельный файл со скриптом, который будет работать в фоне:
А в основном коде:
Всё общение — через
Что можно и нельзя делать в Web Worker:
— Нельзя напрямую работать с DOM (document, window, элементы страницы).
— Нельзя использовать
Зато можно делать:
— Математические расчёты.
— Обработку больших массивов.
— Парсинг JSON, XML.
— Декомпрессию данных.
— Обмен сообщениями с сервером (через fetch, WebSocket).
#webworker #фронтенд
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 #фронтенд
👍22❤6
Одна переменная на три мира: как синхронизировать значение между HTML, CSS и JavaScript
В статье Крис Койер показывает, как установить переменную
#фронтенд #pug #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
Энтузиаст сделал проект, который превращает короткие видео в ASCII-арт. Проект реализован с помощью CSS и JavaScript.
По ссылке можно посмотреть код проекта и попробовать воспроизвести различные видео: https://codepen.io/konstantindenerz/pen/YzgRQZj
#codepen
🔥10👍7❤1
CORS от А до Я: как не ломать фронт ради бэкенда
Ошибка CORS — один из самых частых стоперов на стыке фронта и API. В статье по шагам разбирается, зачем вообще нужен механизм Cross-Origin, какие бывают типы запросов, как устроен preflight и в чём чаще всего ошибаются разработчики. Плюс — готовые конфиги для разных серверов, чтобы настроить CORS правильно с первого раза.
#cors
Ошибка CORS — один из самых частых стоперов на стыке фронта и API. В статье по шагам разбирается, зачем вообще нужен механизм Cross-Origin, какие бывают типы запросов, как устроен preflight и в чём чаще всего ошибаются разработчики. Плюс — готовые конфиги для разных серверов, чтобы настроить CORS правильно с первого раза.
#cors
👍7🔥2
Чек-лист для проверки доступности вашего сайта для всех пользователей
Хорошая и важная статья, в которой обсуждается доступность сайтов для всех пользователей. Контрольный список включает тестирование с помощью инструментов проверки специальных возможностей, использование семантического HTML, использование альтернативного текста для изображений и пиктограмм и других возможностей.
Несложное, но большое дело — проверить свой сайт на выполнение всех пунктов.
#тестирование #лучшиепрактики #интерфейс
Хорошая и важная статья, в которой обсуждается доступность сайтов для всех пользователей. Контрольный список включает тестирование с помощью инструментов проверки специальных возможностей, использование семантического HTML, использование альтернативного текста для изображений и пиктограмм и других возможностей.
Несложное, но большое дело — проверить свой сайт на выполнение всех пунктов.
#тестирование #лучшиепрактики #интерфейс
👍8🔥3
Революция в условном рендеринге React
Если вам надоело писать
#react
Если вам надоело писать
if
, &&
и ? :
в каждом React-компоненте, эта статья — находка. Здесь показано, как использовать декларативные абстракции (<Show>
, <Switch>
, <Match>
) в React, вдохновившись стилем SolidJS, чтобы сделать условный рендер читаемым и масштабируемым. А ещё — как эти паттерны можно адаптировать под ваш собственный фреймворк.#react
👍12👎7🗿4🤣2
Перенаправления в Angie: return, rewrite и примеры их применения
Сколько времени вы тратите на настройку
Все подробности — в статье.
#бэкенд #angie
Сколько времени вы тратите на настройку
location
, rewrite
и редиректы в Nginx? Angie упрощает это до пары строк: return 301
для HTTPS, rewrite
с регулярками и даже спец-код 444
для «отсечения ботов». Готовьтесь управлять запросами элегантно и безопасно — без избыточной конфигурации.Все подробности — в статье.
#бэкенд #angie
👍2🔥1