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

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

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

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

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

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

@your_tech

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

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

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

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

Это 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) в контексте веб-разработки?

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

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

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

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

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

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

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

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

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

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

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

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

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

#фронтенд #angular

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

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

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

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

Оmatsuri

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

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

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

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

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

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

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

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

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

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

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

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

Нашел интересный 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