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

Читать полностью…

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

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

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

#инструменты #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

Читать полностью…

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

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

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

Читать полностью…

Оmatsuri

Это небольшой, но полезный набор инструментов. Здесь вы найдете декодер, генератор градиентов, разделитель страниц, генератор данных и многое другое.

Проект опенсорсный, поэтому можете заглянуть в репозиторий, чтобы изучить внутрянку.

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

Читать полностью…

20 версий Angular за 5 лет: «незаметные» фичи, которые спасают UI-киты

На этой неделе команда Angular отметила значимый юбилей в истории развития своего фреймворка — 20-ю мажорную версию! Самое время поностальгировать и вспомнит путь развития фреймворка.

Автор этой статьи прошёл всю эволюцию Angular и собрал чек-лист изменений, которые кажутся мелочью, но экономят часы на поддержке и открывают новые архитектурные трюки.

А какая фича Angular изменила ваш сценарий разработки?

#фронтенд #angular

Читать полностью…

​​Мегагайд: культура работы с Git

Git — это не только (и не столько!) знание самой технологии и конкретных команд, но и определённая культура взаимодействия, практики, подходы, договорённости. Всё это помогает участникам команды лучше понимать друг друга и работать быстрее и чётче.

В статье — как раз об этом. В ней раскрыли, что формирует культуру работы с Git: от конвенций именования коммитов и до практик работы в пуллреквесте. В конце статьи — полезные ссылки на интерактивные обучалки, шпаргалки и гайды: https://habr.com/ru/companies/yandex_praktikum/articles/812139/

#git #шпаргалки

Читать полностью…

​​Самые популярные вопросы на собеседовании фронтенд-разработчика

Это 55 выпуск видеокаста «Front-end. Вопросы на собеседовании».
В серии видео автор помогает подготовиться к собеседованиям на позицию джуниор и мидл фронтенд-разработчик.

Видеокаст представлять из себя коллекцию технических вопросов, которые можно получить на интервью: https://www.youtube.com/watch?v=PI1X5oFHou8

В этом выпуске:
— Что такое хвостовая рекурсия? Оптимизация рекурсии?
— Что такое и как работает debounce() и throttle() в JavaScript?
— Как в JavaScript работают декораторы? Как они могут быть использованы для модификации поведения классов и методов?
— Как можно создавать пользовательское событие (custom events) в JavaScript?
— Что такое IndexedDB? Как работает IndexedDB?
— Расскажите о методе requestAnimationFrame()?
— Как работают дефолтные параметры в ES6?
— Что такое «BigInt» в ES2020 и для чего он используется?
— Какие нововведения были представлены в ECMAScript 2021 (ES12)?
— Что такое fetch()? Как работает функция fetch()?
— Что такое JSON в JavaScript? Как его можно использовать?
— Что такое и как работает коэффициент сжатия (compression ratio) в контексте веб-разработки?

#собеседование #фронтенд

Читать полностью…

меню «Пуск» в Windows 11 — это React Native приложение

И оно грузит процессор до 80%.

Тут пользователи Reddit и в X.com выяснили, что каждый вызов «Пуска» запускает тяжелый интерфейс, который обновляется как веб-страница: с анимациями, DOM-объектами и переработкой слоев.

Это приложение запускается на каждый клик и может загружать до 80% одного ядра процессора. В зависимости от конфигурации ПК, это приводит к ощутимым подлагиваниям, особенно на устройствах со слабым железом.

Microsoft уже давно использует React Native в интерфейсе Windows 11. Например, на этом же фреймворке построена страница «Ваша учетная запись» в настройках. Сделано это для унификации разработки, чтобы использовать один код и на десктопе, и в вебе.

Но зачем гонять процессор до 80% ради того, чтобы показать сетку ярлыков? Ничего не понятно, но очень интересно.

@your_tech

Читать полностью…

Как Node.js обрабатывает сотни тысяч запросов в одном потоке

Пошаговый разбор циклов событий, фаз timers → pending → poll → check → close и роли libuv. Вы узнаёте, кто будит коллбэки, почему промисы и таймеры попадают в разные очереди и как Node удерживает высокую производительность, оставаясь однопоточным.

#бэкенд #nodejs

Читать полностью…

Как сделать обтекание текста без лишней вёрстки

Используйте свойство shape-outside, которое позволяет добавить обтекание текста по фигуре. Весь текст вне обтекания сам подстроится под оставшееся место.

.column--left .shape {
  float: right;
  shape-outside: circle(100px at 100% 50%);
}

#советы #css

Читать полностью…

RTK Query + OpenAPI: автоматически генерируем типобезопасные API-хуки для React

Забываем про ручные fetch и бесконечные типы — берём спецификацию OpenAPI, прогоняем через openapi-typescript-codegen, подключаем к RTK Query и сразу получаем готовые хуки: useGetPetsQuery, useCreatePetMutation и другие.

Полный путь показан в статье: настройка генератора, создание базового api, интеграция в Redux store и примеры рефакторинга, где количество кода сокращается в разы.

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

Читать полностью…

Адаптивный сайт значит, что пользователь может под него адаптироваться

Читать полностью…

Если хотите сделать необычный сайт, то ловите идею

Разраб сделал сайт с миллионом шахматных досок. Возможно, вы уже видели что-то подобное. Например, сайт с миллионом чекбоксов или с одним, но доступным абсолютно каждому пользователю. Это сделал тот же автор.

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

Как вам? Уже готовы сделать такие же шашки или придумали что-то интереснее?

#ненормальноепрограммирование

Читать полностью…

Недавно узнали, что ОТП Банк меняет позиционирование и берет курс на смелость и дерзкую философию. А еще выяснили, что у них работает 700+ айтишников и за их работой можно наблюдать в этом канале.

Знаем, что его ведет последователь Agile (собственно, этой методологии и придерживаются в Банке). Он делится вакансиями, статьями о том, как пилят фичи в Банке, финтех-новостями, экспертными комментами коллег. Да что уж там — в канале можно просто поболтать о насущном, и даже договориться о том, чтобы поучаствовать в батле с ребятами из ОТП.

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

Это #партнёрский пост

Читать полностью…

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

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

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

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

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

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

#copilot #мнение

Читать полностью…

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

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

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

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

Читать полностью…

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

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

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

#codepen #css #javascript

Читать полностью…

Pug: HTML без скобок, с шаблонами и миксинами

Если вы устали от громоздкого HTML и хотите писать разметку быстрее и чище, Pug может стать отличным решением. Это препроцессор, который превращает лаконичный код без угловых скобок в полноценный HTML. В статье вы найдёте:

— Основы синтаксиса Pug: как писать разметку без закрывающих тегов и угловых скобок.
— Работу с шаблонами и миксинами: как переиспользовать код и создавать более модульную структуру.
— Преимущества и недостатки: когда стоит использовать Pug, а когда лучше обойтись без него.
— Инструкции по установке и компиляции: как начать работать с Pug на вашем проекте.

А вы используете Pug в своих проектах или нет?

#фронтенд #html #pug

Читать полностью…

Тюним стартовую страницу Firefox: убираем лишнее, добавляем своё

В свежем гайде автор показывает, как «причесать» новую вкладку Firefox без расширений: скрыть рекламные блоки, заменить «карточки» на собственные закладки, подправить отступы и фон с помощью пары строк пользовательского CSS.

Гайд в двух часть: первая и вторая. Если хотите довести до ума какую-то часть браузера или исправить ошибки разработчиков, то переходите по ссылкам.

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

Читать полностью…

16 стендов, 55 экспертов, 400+ участников: итоги GPB Conf

Газпромбанк провел свою первую конференцию и теперь делится результатами. Более 400 профессионалов из ведущих компаний смогли поделиться своими знаниями и экспертностью. А посетители погрузились в атмосферу работы в банке, прослушав доклады и приняв участие в активностях в экспозоне.

Подробнее о том, как все прошло, дальнейших планах, итогах и причинах ждать следующую конференцию — в статье.

Читать полностью…

Чем отличается новичок от опытного разраба

Читать полностью…

«Список покупок за 2 часа»: как AI сгенерировал дизайн, код и голосовой ввод на лету

Автор этой статьи поделился своим опытом разработки приложения с помощью ИИ, Он бросил в Google Stitch один промпт, а через 30 секунд получил готовый Figma-макет и HTML. Дальше — чистый JS без фреймворков, WebSocket-синхронизация, голосовой ввод через Gemini 2.5 Pro и живое демо, которым удобно пользоваться на телефоне. Теперь мы можем пошагово изучить промпты, архитектуру ванильного SPA и нюансы интеграции AI-моделей прямо в браузере.

#фронтенд #javascript #ai

Читать полностью…

🥰Виртуальные серверы в США от Aéza со скидкой 20%!

Мощь, скорость и надежность для ваших проектов — по выгодной цене.

Почему выбирают серверы Aéza:

• Канал связи до 25 Гбит/с — никаких лагов и задержек
• Мощные процессоры AMD Ryzen 9 9950X — справятся с любой нагрузкой
• Встроенная DDoS-защита — ваш проект под надежной охраной

💻Время истекает! Успейте активировать скидку 20% до 06.06 и разгоните свой проект на топовых серверах!

P.S. Предложение не суммируется с другими акционными программами.

Выбрать тариф | Зарегистрироваться

Реклама. Рекламодатель: ООО «Аеза Групп», ИНН 7813654490, erid: 2W5zFGbd7PE

Читать полностью…

Подтвердите личность: как работает многофакторная аутентификация в MULTIFACTOR

Один пароль сегодня легко «угадать» или украсть. Многофакторная аутентификация (MFA) добавляет второй (а то и третий) способ подтверждения личности: смс-код, одноразовый токен в приложении или отпечаток пальца. Весь смысл — защитить данные и не допустить несанкционированный доступ.

Если даже злоумышленник взломает ваш пароль, то без дополнительного фактора ему всё равно не получить доступ. Поэтому многие компании и сервисы от банкинга до госуслуг вводят MFA, так как потеря аккаунта несёт за собой серьёзные риски.

Сегодня расскажем, как MFA работает в MULTIFACTOR и какие имеет преимущества. Подробности по ссылке.

#безопасность

Читать полностью…

Таро врёт! В отличие от нашей IT-колоды

Цифровые арканы говорят с вами и проливают свет на ранее неведомые потоки информации. Вытяните «Карту дня» и получите мудрый совет судьбы: https://tprg.ru/0RTK

Читать полностью…

Такая мотивировка отказа в 2025 году, конечно, больше мем и байка 💀

В реальности всё, наверное, по другому. И мы хотим разобраться КАК. Помогите нам пролить свет на рекрутинг в IT с точки зрения н-а-с-т-о-я-щ-и-х разработчиков-соискателей.

@ithumor

Читать полностью…

Зачем вам нужен Passive Event Listener

Passive Event Listener — это особый режим для обработчика событий, при котором браузер сразу знает, что внутри вы не будете вызывать preventDefault(). Узнав это заранее, движок может не ждать вашего решения и тут же приступать к прокрутке или другим действиям по умолчанию. В итоге интерфейс отзывается быстрее и анимация скролла становится плавнее. Это позволяет:

1. Бороться с «дёрганым» скроллом на мобильных устройствах. На touchstart/touchmove браузер вынужден приостанавливать прокрутку, пока не убедится, что вы не отменили её через preventDefault(). Если таких обработчиков много, задержка может достигать 100 мс и пользователь ощущает «тормоза». С passive: true пауза не требуется.

2. Снизить нагрузку на главный поток (main thread). Меньше блокирующих операций — меньше шансов, что UI «замёрзнет» на мгновение.

Как использовать:

Ключевой момент — в объекте опций passive: true.

function handleMove(e) {
  // Только читаем, не вызываем preventDefault
  const { clientX, clientY } = e.touches[0];
  // ...логика, например, показать координаты
}

window.addEventListener('touchmove', handleMove, { passive: true });

Если в пасcивном обработчике всё-таки написать e.preventDefault();, браузер выведет предупреждение в консоли и проигнорирует вызов. Поэтому добавляйте passive: true только там, где оно действительно безопасно, то есть где вы не собирались отменять действие по умолчанию.

Где это особенно полезно:
— touchstart и touchmove — для плавного скролла на мобильных.
— wheel и scroll — когда отслеживаете прокрутку, но не мешаете ей.
— Любые жесты, где вы просто читаете координаты.

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

Читать полностью…

Курс: фулстек-разработка веб-сервиса

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

Этот курс — настоящая энциклопедия по созданию веб-сервисов: от дизайна и форм до логирования, базы данных и отправки писем. Всё на TypeScript, всё с нуля, всё по делу. За кулисами — полный стек, чистый код и никакой воды.

#курс #web #fullstack #ru

Читать полностью…

От Moment.js к Temporal: новый стандарт работы с датами в JavaScript

Унаследованный Date API путает тайм-зоны, мутирует объекты и требует громоздкого кода. В этой статье мы познакомимся с его альтернативами: Moment.js и date-fns, а затем посмотрим, как встроенный Temporal решает те же задачи — иммутабельность, наносекундная точность, богатая работа с тайм-зонами и разные календарные системы.

Вас ждут: наглядные примеры Temporal.PlainDate, ZonedDateTime, Instant, операции add/round/with и таблица сравнений с Moment.js и date-fns.

#фронтенд #javascript

Читать полностью…