🎉 Chrome исполнилось 17 лет!

В 2008 году Chrome появился как эксперимент с упором на скорость, безопасность, стабильность и простоту. Сегодня это самый популярный браузер в мире, и его эволюция впечатляет 👇

🔹 Скорость
Старт с движка V8, который делал JavaScript в разы быстрее конкурентов. Сейчас Chrome — лидер в тесте Speedometer 3.1 (главный бенчмарк скорости браузеров), оптимизирован для мобильных устройств и экономит пользователям миллионы часов загрузки страниц.

🔹 Безопасность
С первых версий — песочница вкладок, автообновления, Site Isolation. Позже — Rust-компоненты, защита от фишинга с помощью ML, менеджер паролей и повсеместный переход на HTTPS.

🔹 Стабильность
Благодаря мультипроцессной архитектуре сбой одной вкладки не «роняет» браузер. А технологии вроде Discarding, PartitionAlloc и фоновые обновления делают Chrome надёжным даже при сотнях открытых вкладок.

🔹 Простота
Минимализм с самого старта: единый Omnibox (адрес + поиск в одном поле) и минимум интерфейса вокруг контента. Со временем появились удобства — автозаполнение, менеджер паролей, DevTools с AI-подсказками. Новые функции добавляются аккуратно, сохраняя простоту.

✨ Сегодня Chrome — это результат многолетней работы над удобным и безопасным интернетом. А впереди — AI-возможности и новые стандарты для открытого веба.

Читать полную статью Addy Osmani:
👉 https://addyosmani.com/blog/chrome-17th/

🎯 CSS: выравниваем по-умному, а не методом тыка

Статья "The Fundamentals of CSS Alignment" (4 сентября 2025) объясняет, как работают свойства выравнивания в Grid, Flexbox и блочном режиме — и почему больше логики, а не путаницы.

Основные тезисы:
• Есть два уровня: контейнер (content) и элемент (item). Удобные шорткаты: place-content, place-items, place-self.
• В Grid-контейнере элементы выравниваются внутри ячеек или областей, а 1fr может поглотить всё свободное пространство и заблокировать выравнивание.
• В Flexbox выравнивание по горизонтали работает группой (через justify-content).
• Для абсолютных элементов (absolute) работает только place-self.
• Чтобы избежать проблем с overflow (например, недоступной областью), используйте safe, например justify-self: safe center.

Читать подробнее: https://css-tip.com/explore/alignment/

🎉 Наконец-то: безопасные методы работы с массивами в JavaScript

ES2023 представил версии привычных методов для массивов, которые не мутируют исходные данные — идеально для React и функционального подхода.

Сравнение:
• toSorted() вместо sort() — новый отсортированный массив.
• toReversed() вместо reverse() — новый перевёрнутый массив.
• toSpliced() вместо splice() — новый результат без изменений оригинала.

Подробнее в статье: https://allthingssmitty.com/2025/09/08/finally-safe-array-methods-in-javanoscript/

🚨 Атака на npm: компрометация debug, chalk и ещё 16 популярных пакетов

По данным Aikido Security, начиная с 8 сентября 2025, 13:16 UTC, в npm были загружены злонамеренные версии ряда широко используемых пакетов. В сумме они набирают более 2 миллиардов загрузок в неделю.

---

Что произошло:

* Были обновлены 18 пакетов (включая debug, chalk, ansi-styles, strip-ansi, supports-color и др.) — внесён обфусцированный код, который выполняется в браузере.
* Этот код тихо перехватывает транзакции криптовалюты и действия web3, вмешивается в window.ethereum и переписывает адреса получателей на адреса, контролируемые злоумышленниками.
* Пакеты были доступны скомпрометированными примерно 2–3 часа до того, как часть из них была удалена или заменена чистыми версиями.

---

Почему это опасно:

* Пострадать могут приложения, в которых запускались клиентские (браузерные) сборки с этими пакетами, особенно те, что работают с криптовалютами/web3.
* Даже если вы явно не используете debug или chalk, пострадать можно транзитивно — через зависимости.

---

Что делать, если ты мог быть затронут:

1. Проверь package.json, package-lock.json / yarn.lock — ищите версии пакетов, которые были скомпрометированы.
2. Обнови на безопасные версии (версии до атаки) или используйте версии, подтверждённые как безопасные.
3. Пересобери клиент-bundle’ы, очисти кеши на CDN и локальные кеши сборки — если они содержат зловредный код.
4. Мониторьте журналы и телеметрию, если приложение работает с web3 — поиск необычного поведения wallet API.

---

🧭 Уроки:

* Даже популярные, проверенные пакеты могут быть атакованы через phishing и компрометацию аккаунта.
* Один сбой безопасности может распространиться по экосистеме через транзитивные зависимости.
* Статическая защита + внимательность к версии + контроль зависимостей + своевременные обновления критичны.

---

Читать оригинал: https://www.aikido.dev/blog/npm-debug-and-chalk-packages-compromised

⚡️ В React Router появились middleware!

В версии 7.9.0 добавили стабильную поддержку middleware 🎉. Теперь можно:

* 🔑 Проверять авторизацию в родительском маршруте и останавливать выполнение дочерних loader
* 📡 Передавать данные из middleware в контекст, доступный в loader и маршрутах
* 🛠 Реализовать общую логику (логирование, редиректы, заголовки) без дублирования

Пример авторизации через middleware:

// routes/_protected.tsx
import { redirect } from "react-router";

export async function middleware({ context }) {
  if (!context.user) {
    throw redirect("/login");
  }
}

👉 Подробнее: https://remix.run/blog/middleware
👉 Документация: https://reactrouter.com/how-to/middleware

⚡️ React Bits — готовые анимированные компоненты для React

Иногда мне присылают полезные сайты — так я и наткнулась на https://reactbits.dev/ 🎉

Это коллекция готовых анимированных компонентов для React + Tailwind: кнопки, переключатели, загрузчики, анимации. Быстро оживляет интерфейс и экономит время разработки.

Последние 8 месяцев я каждые две недели проводила ассессменты фронтенд-разработчиков. Делюсь инсайтами:

✨ Компания и команда в которой человек начинает стажировку играет немаловажную роль. Например, встречались кейсы, когда разработчик с 6 годами опыта получал оценку «джун» — просто потому что его скоуп задач в проекте был сильно ограничен. Причём иногда уже по рассказу кандидата о том, чем он занимался, можно составить определённое мнение о его уровне.

🚀 Большое значение имеет стремление к саморазвитию. Попадались кандидаты, которые честно говорили: «Я просто пишу код, а теорию уже давно забыл».

Если первую категорию людей я еще понимаю что окружение возможно сыграло свою роль, то вторую нет, как им не страшно оказаться не востребованным и не развиваться)

🎬 Всем привет!
Вышел документальный фильм про Vite — https://www.youtube.com/watch?v=bmWQqAKLgT4 (на английском языке).

Фильм рассказывает о том, как появилась идея создания Vite, как стремительно начала расти экосистема, появились плагины, тестовый фреймворк Vitest и конференция ViteConf, впервые объединившая разработчиков из разных экосистем.
Также показано, как Vite стал *де-факто стандартом* современной веб-разработки.

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

🔥 Рекомендую к просмотру!

🧩 Разберём сегодня небольшую задачку:
https://bigfrontend.dev/react/useUpdateEffect

Нужно реализовать кастомный хук `useUpdateEffect`, который работает почти так же, как useEffect,
но не срабатывает при первом рендере.

Вот возможная реализация 👇

import React, { useEffect, useRef } from 'react';

export function useUpdateEffect(effect: EffectCallback, deps?: DependencyList) {
  const isFirst = useRef(true);

  useEffect(() => {
    if (isFirst.current) {
      isFirst.current = false;
      return;
    }
    return effect();
  }, deps);
}

🔗 Your URL Is Your State

Недавно наткнулась на статью:
https://alfy.blog/2025/10/31/your-url-is-your-state.html

В ней — простая, но почти забытая философия:
в погоне за фреймворками и глобальными сторами мы перестали ценить то, что веб умел с самого начала — хранить состояние прямо в URL-е.

Хорошо спроектированный URL — это контракт между приложением и пользователем.
Он описывает смысл, сохраняет контекст и делает взаимодействие предсказуемым.

🧭 Когда стоит хранить состояние в URL:
✅ поисковые запросы, фильтры, сортировки, даты, активные вкладки, режимы просмотра
❌ пароли, личные данные, временные состояния, слишком большие объекты

💡 Лучшие практики:
• Делайте параметры читаемыми и последовательными (?theme=dark&page=2)
• Используйте pushState для навигации, replaceState — для мелких обновлений
• Не храните чувствительные данные
• Избегайте чрезмерно длинных или зашифрованных ссылок

📖 В общем, очень советую прочитать статью —
и вспомнить, насколько элегантным может быть веб, если не усложнять то, что уже давно работает идеально.

💡 Давайте решим лёгкую задачку:
https://bigfrontend.dev/typenoscript/implement-Pick-T-K

По моим наблюдениям, многие фронтендеры не всегда до конца знают TypeScript.
Базовые вещи — да 😊, а вот если копнуть чуть глубже, то многие теряются!

---

📘 Условие задачи:

Реализуйте тип MyPick<T, K> самостоятельно.

type Foo = {
  a: string
  b: number
  c: boolean
}

type A = MyPick<Foo, 'a' | 'b'> // { a: string, b: number }
type B = MyPick<Foo, 'c'>       // { c: boolean }
type C = MyPick<Foo, 'd'>       // Ошибка

Использовать встроенный Pick<T, K> — нельзя 🚫

---

🧠 Чтобы решить задачу, нужно вспомнить две вещи:

1. оператор keyof - https://www.typenoscriptlang.org/docs/handbook/2/keyof-types.html
2. наследование с помощью extends

Тип MyPick принимает:

* первый аргумент — исходный тип T
* второй — K, который может быть только ключом из T

---

✅ Решение:

type MyPick<T, K extends keyof T> = {
  [P in K]: T[P]
}

Так мы получаем новый тип, содержащий только нужные ключи и их типы 👌

🚀 Вышел Storybook 10!

Крупный релиз популярного инструмента для разработки и документирования UI-компонентов.
Главное изменение — переход Storybook на формат ECMAScript Modules (ESM-only).
Это делает проект современнее, ускоряет установку и уменьшает вес зависимостей,
но требует внимания при обновлении — это breaking change.
🧭 Гайд по миграции: https://storybook.js.org/docs/releases/migration-guide-from-older-version

📘 Подробнее о релизе и всех нововведениях:
https://storybook.js.org/releases/10.0

P.S. я уже как-то писала о том

В чём же разница между CommonJS и ES Modules? - https://news.1rj.ru/str/frontenddevelopernews/4
Как вообще уживаются вместе .cjs, .mjs и .js файлы в одном проекте? - https://news.1rj.ru/str/frontenddevelopernews/5

🌟 Site of the Day — Nov 10, 2025
https://www.awwwards.com/sites/messenger

💬 Представляю вам сайт дня — Messenger от студии Abeto.

🔗 Ссылка на сам сайт:
https://messenger.abeto.co/

💡 Недавно наткнулась на очень полезную статью про 10 недооценённых фич JavaScript

и вот что я там обнаружила 👇

1️⃣ Использование Set для удаления дубликатов и быстрых проверок.
2️⃣ Методы Object.entries() и Object.fromEntries() для преобразования объектов.
3️⃣ Операторы ?? (nullish coalescing) и ??= — более безопасные дефолты по сравнению с ||.
4️⃣ Интернационализация через Intl — форматирование чисел, валют, дат.
5️⃣ IntersectionObserver для ленивой загрузки изображений и бесконечной прокрутки.
6️⃣ Promise.allSettled() для обработки набора промисов, когда нужно дождаться всех, даже если некоторые завершились с ошибкой.
7️⃣ Метод Element.closest() для надёжного поиска в DOM вверх по дереву.
8️⃣ Классы URL и URLSearchParams — работа с URL без регулярных выражений.
9️⃣ Цикл for…of — итерации с поддержкой итераторов и возможностью прерывания.
🔟 Топ-уровневый await (top-level await) — позволяет работать с асинхронным кодом в модулях без обёрток.

📖 Подробнее читай в статье:
👉 https://jsdev.space/underrated-js-features/

Вообще, как по мне, разработчики — самые ленивые люди на свете 😄 Не зря же мы через свои приложения пытаемся упростить жизнь людям.

Когда я наткнулась на статью «Ultimate Prompts for Every Developer», сразу стало интересно: "какие там такие промпты, которые действительно полезны в работе?"

Собрала для вас короткую подборку самых практичных — их можно просто копировать и использовать при необходимости 👇

---

1️⃣ Фреймворк для рефакторинга и оптимизации

I have a [language] function in a [framework] project that needs refactoring.

Current code:
[paste code]

Issues I'd like to address:
[specific issue, e.g., low readability]
[specific issue, e.g., non-optimal O(n^2) time complexity]

What I've considered:
[ideas you've already tried]

Constraints:
[must remain backward compatible, no new dependencies]

Please suggest refactored code with explanations,
including trade-offs and potential edge cases.

2️⃣ Code Review от трёх «персон»

Please review this code from three different perspectives:

1. Security specialist:
   - Identify vulnerabilities / injection risks
   - Mention any OWASP Top 10 concerns

2. Performance engineer:
   - Highlight inefficiencies or bottlenecks
   - Suggest better data structures or algorithms

3. Maintainability expert:
   - Point out unclear naming / complex logic
   - Suggest improvements for testability and structure

CONTEXT:
- Tech stack: [React/Node/TS]
- Constraints: [e.g., no new dependencies]

CODE:
[YOUR CODE]

3️⃣ Постепенное проектирование API

I'm designing a RESTful API for a [SPECIFIC DOMAIN] system.
Let's develop this progressively:

STAGE 1: Core resources
- Define resources + relationships
- Primary attributes
- Basic CRUD

STAGE 2: Interaction patterns
- Non-CRUD endpoints
- Filtering, sorting, pagination

STAGE 3: Advanced
- Auth & permissions
- Rate limiting
- Versioning
- Caching (ETag, directives)
- Error format standardization

STAGE 4: Documentation
- Generate OpenAPI spec
- Provide request/response examples

4️⃣ Документация по компоненту/модулю

Generate comprehensive developer documentation for this [FUNCTION/COMPONENT/MODULE]:

[YOUR CODE]

Structure the documentation as follows:

1. OVERVIEW
   - Purpose, functionality, when to use

2. TECH SPECS
   - API, params, return values, types
   - State management (if applicable)
   - Events

3. EXAMPLES
   - Basic example
   - Advanced usage
   - Customization cases

4. TROUBLESHOOTING
   - Common errors
   - Debugging tips
   - Performance considerations

5. RELATED COMPONENTS
   - Dependencies
   - Components frequently used together

---

Полный список из 11 промптов — по ссылке 👇
https://medium.com/@onix_react/ultimate-prompts-for-every-developer-031a6d26a569