Frontend Developer

🧩 Разберём сегодня небольшую задачку:
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);
}

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

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

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

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

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

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

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

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

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

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

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

⚡️ В 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

😂😂😂
Отличной всем пятницы и прекрасных выходных 🥳

🚨 Атака на 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

🤣🤣🤣

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

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

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

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

🎯 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/

🎉 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/

Вот я думаю, что это совсем не так) SQL  точно не боюсь) А вы что думаете и чего боитесь?

A Few Things About the Anchor Element’s href You Might Not Have Known

Обычно то, что кажется супер простым, просто пролистывается и не читается 🙂
Но я уже много раз говорила: сила — в базовых вещах ⚡️

На днях наткнулась на статью с таким названием:
«Несколько фактов о значении href у тега `<a>`, которых вы могли не знать»
и решила посмотреть, что там интересного 👀

Вот что я нашла:

* `href="#"` — скроллит страницу в начало документа.
* `href=""` — перезагружает текущую страницу, сохраняя строку запроса (query string), но удаляя hash.

Примеры:

URL                  Преобразуется в
/path/               /path/
/path/#foo           /path/
/path/?id=foo        /path/?id=foo
/path/?id=foo#bar    /path/?id=foo

* `href="."` — перезагружает текущую страницу, убирая и query string, и hash (если они есть).

Примеры:

URL                  Преобразуется в
/path                /
/path#foo            /
/path?id=foo         /
/path/               /path/
/path/#foo           /path/
/path/?id=foo        /path/
/path/index.html     /path/

* `href="?"` — тоже перезагружает страницу, убирая query и hash, но оставляет ?.

Примеры:

URL                  Преобразуется в
/path                /path?
/path#foo            /path?
/path?id=foo         /path?
/path?id=foo#bar     /path?
/index.html          /index.html?

* `href="data:"` — можно делать ссылки на data URL. Например:

<a href="data:text/plain,hello world">
  View plain text data URL
</a>

* `href="video.mp4#t=10,20"` — медиa-фрагменты. Можно указывать конкретный отрезок видео или аудио.
В этом примере видео начнётся с 10-й секунды и остановится на 20-й.

---

Было ли среди этого что-то, о чём вы не знали? 🤔

👉 https://blog.jim-nielsen.com/2025/href-value-possibilities/

😂😂😂

CSS-Questions

Смотрите, какой классный сайт с вопросами по CSS https://css-questions.com/

Собрано 150+ вопросов — от базовых до продвинутых тем.
Здесь найдётся что-то полезное как для новичков, так и для опытных разработчиков.
А ещё можно прокачать навыки на практических заданиях по разным аспектам CSS.

Готовы проверить себя? 💡

State of CSS 2025

Вышли результаты State of CSS 2025 🥳 https://2025.stateofcss.com/en-US

Мне была особенно интересна часть про инструменты https://2025.stateofcss.com/en-US/other-tools

И вот что мы видим :

CSS Frameworks

* Tailwind снова на первом месте. Его чаще выбирают разработчики с меньшим опытом, а более опытные предпочитают кастомные или внутренние решения.
* При этом почти половина участников (47%) либо вообще не используют фреймворки, либо пропустили этот вопрос.

CSS-in-JS

* CSS Modules со своим «лёгким» подходом всё ещё в топе.
* Styled Components по-прежнему уверенно держит вторую позицию.

Pre-/Post-processors

* Sass остаётся №1 среди препроцессоров.
* Но в целом их популярность снижается — CSS всё активнее перенимает их возможности.

Announcing TypeScript 5.9

В продолжение предыдущего поста 🙂
Вышла новая версия TypeScript, и одной из фич стали изменения в команде tsc --init.
Теперь она создаёт более лаконичный и продуманный tsconfig.json — без горы комментариев и неиспользуемых опций. В файле остаются только действительно нужные настройки, плюс есть ссылка на документацию и автодополнение.

Ещё одна интересная новинка — отложенный импорт с помощью import defer:

import defer * as feature from "./some-feature.js";

// Модуль загрузится только при первом обращении к экспорту
feature.run();

Это помогает уменьшить время начальной загрузки приложения и подгружать код только тогда, когда он реально нужен.

Подробнее: https://devblogs.microsoft.com/typescript/announcing-typescript-5-9/

Всем привет!
Недавно наткнулась на эту статью:
https://www.totaltypescript.com/how-to-create-an-npm-package

Решила пробежаться глазами, чтобы понять, что там есть интересного. И почему-то меня триггернули пункты 2.1 и 3.2.

Автор статьи предлагает вручную создать файлы package.json и tsconfig.json.
Не знаю, как у вас, но меня прям передёрнуло 🙃 Почему бы не предложить создать их командами:

npm init
tsc --init

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


А вы как думаете, стоит ли в таких гайдах предлагать команды или ручное создание файлов — норм вариант?

P.S. Сорри за душноту и занудство, но просто не смогла пройти мимо 😅

Правда жизни 🙊