Держите полезную CLI-утилиту — npkill, предназначенную для удаления всех папок node_modules в проектах.

Позволяет освободить значительное количество места на диске

Запускаешь команду:

npx npkill

Дальше, просто нажимаешь [Пробел], чтобы удалить те папки, которые больше не используешь

Удобно ещё и то, что она показывает, сколько дней назад была последняя модификация

@WebDev_Plus

TypeScript: единый источник для значений, меток и сравнений

export const ORDER_TYPES = {
  product: "Product Order",
  service: "Service Order",
} as const;

// Тип, представляющий ключи ORDER_TYPES
export type OrderType = keyof typeof ORDER_TYPES;

// Опции для дропдауна
export const ORDER_TYPE_OPTIONS = Object.entries(ORDER_TYPES).map(
  ([value, label]) => ({ value: value as OrderType, label }),
);

// Пример использования:
// - Сравнение: if (type === "product")
// - Получить метку: ORDER_TYPES[type]
// - Для дропдауна: <Select options={ORDER_TYPE_OPTIONS} />

@WebDev_Plus

JavaScript может форматировать числа гораздо умнее, чем вы думаете

// Intl.NumberFormat — форматирование чисел: единицы измерения, сокращения, валюты

// Пример форматирования со скоростью (единицы измерения)
const numberFmt = new Intl.NumberFormat("en", {
  style: "unit",               // стиль "единица измерения"
  unit: "kilometer-per-hour",  // километры в час
});

// Пример форматирования в компактной форме (например, "15.3K" вместо "15320")
const compactFmt = new Intl.NumberFormat("en", {
  notation: "compact",          // компактная запись (K, M и т. д.)
  maximumFractionDigits: 1,     // максимум 1 знак после запятой
});

// Пример форматирования валюты (йены, без округления вверх)
const currencyFmt = new Intl.NumberFormat("en", {
  style: "currency",           // стиль "валюта"
  currency: "JPY",             // японская йена
  roundingMode: "floor",       // округление вниз
});

// Примеры вывода
console.log(numberFmt.format(88));        // "88 km/h"
console.log(compactFmt.format(15320));    // "15.3K"
console.log(currencyFmt.format(4999.99)); // "¥4,999"

@WebDev_Plus

Сегодня узнал про предложение в JS под названием Declarations in Conditionals.

Оно позволяет писать const или let прямо внутри if или while.

Интересно, стал бы ты так писать?
Мне кажется, идея неплохая — код станет чуть короче, но при этом останется понятным.

(Сейчас это Stage 1 в TC39, на следующей неделе будут выносить на Stage 2.)

@WebDev_Plus

Хватит использовать TypeScript enum'ы.

Почему?
Enum'ы добавляют скрытый код в итоговый файл, тогда как as const — вообще ничего не добавляет.

Типы лучше, бандл меньше.

@WebDev_Plus

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

Один из разработчиков продемонстрировал, что даже сегодня можно писать сайты в духе начала 2000-х — на чистом HTML и CSS, без React, Vue или других фреймворков. Он собрал небольшой сервер на Deno, который рендерит обычные HTML-страницы без роутинга и сложной логики.

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

Кроме того, разработчик добавил эффект перехода с помощью CSS-директивы
@view-transition { navigation: auto; }
что сделало переходы между страницами ещё приятнее.

По его словам, современные браузеры стали настолько умными, что History API уже не нужен для плавной навигации — достаточно обычных ссылок и немного прогрессивного улучшения через HTML Custom Elements.

@WebDev_Plus

Atomic React-ion

По-прежнему один из моих любимых мемов React

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

В сеть попал исходник на Svelte и TypeScript — со всей логикой, компонентами, стилями и даже комментариями разработчиков Apple. Всё это аккуратно собрано и выложено на GitHub «для образовательных целей».

Кто хочет поглазеть - вот: https://github.com/rxliuli/apps.apple.com

@WebDev_Plus

Стартап переписал весь свой Python-бэкенд на Node.js… всего через неделю после запуска продукта.

Причина? Снизить латентность, улучшить асинхронность и лучше справляться с конкуренцией запросов.
Значит ли это, что Node лучше Python?

Нет. Это значит, что идеального стека не существует, но технические решения реально имеют значение, когда ты понимаешь их ограничения.

И статья, в которой они объясняют причины, просто жемчужина.
https://blog.yakkomajuri.com/blog/python-to-node

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

@WebDev_Plus

Иногда я встречаю людей, которые слишком зацикливаются на количестве строк кода (и, если честно, у меня тоже такое бывает).

Но посмотри на этот компонент.

Он вроде бы длинный, НО:

✓ полностью изолированный редактор
✓ стандартные действия: сохранить / сбросить / закрыть
✓ три вспомогательных метода для работы со списками чипов

Если свернуть детали и смотреть только на текущее состояние и API, он получается очень простой, понятный и легко читаемый.

@WebDev_Plus

GitFlow одна из самых старых и формализованных схем ветвления, про которую до сих пор говорят.

Модель появилась в 2010 году и стала популярной, потому что чётко разделяла разработку, релизы, фичи и хотфиксы — то, чего многим командам тогда сильно не хватало.

В GitFlow у каждой ветки есть своя роль:

main — прод-готовый код

develop — интеграционная ветка

feature/ — разработка новых фич

release/ — подготовка релизов

hotfix/ — срочные правки в проде

Такой подход отлично подходит командам с плановыми релизами, поддержкой нескольких версий продукта или строгими QA/Compliance процессами.

Всё движется по понятной схеме, и долгосрочная поддержка становится проще.

Но у GitFlow есть и минусы.

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

Поэтому команды, которые работают быстро или практикуют continuous deployment, обычно его не используют.

GitFlow всё ещё полезен, но сегодня это не универсальный вариант — он оправдан только там, где действительно нужен высокий уровень контроля и разделения процессов.

@WebDev_Plus

API Popover выводит ваш UI на отдельный верхний слой, так что вам больше не нужно мучиться с управлением фокусом. Плюс оформление затемнения настолько короткое, что помещается прямо сюда:

[popover]::backdrop {
  background: rgb(52, 168, 83);
  backdrop-filter: blur(3px);
}

Создавайте больше, тратя меньше кода → https://goo.gle/3XvDUZk

@WebDev_Plus

Next.js 16: cacheLife

Настройка времени, в течение которого:

• заранее подгруженные данные могут переиспользоваться на клиенте без повторного запроса
• заранее отрендеренные данные могут переиспользоваться на сервере без повторного рендера

Документация: https://nextjs.org/docs/app/api-reference/functions/cacheLife

@WebDev_Plus

Хватит делать эти (до смешного простые) ошибки в TypeScript.

Не используй String. Серьезно.

String (с большой буквы) - объект-обертка из JS (плохая идея)
string (с маленькой) - примитивный тип (вот так правильно)

То же самое касается Number и Boolean.
Всегда используй типы с маленькой буквы.

@WebDev_Plus

Секретное слово ???, и насладитесь бесплатным кофе ;)

@WebDev_Plus

Await Dictionary продвинулся на Stage 2.7 в TC39

Команда разработки ECMAScript продолжает двигать язык вперед. Сегодня предложение Await Dictionary успешно дошло до Stage 2.7 в комитете TC39.

Одним из активных участников улучшения стал инженер Bloomberg Адам Кутмор, за что коллеги уже успели его поздравить.

Сейчас Promise.all возвращает результаты в виде массива по позициям, что удобно, но не всегда читабельно. Новое предложение Promise.allKeyed даст возможность получать результаты с именованными ключами в объекте. Это упростит код, особенно когда нужно обрабатывать несколько асинхронных операций с разными смыслами.

Фича всё еще в разработке, но выглядит как шаг к более чистому и выразительному асинхронному JavaScript.

@WebDev_Plus

В Next.js (с cacheComponents) ожидание данных во время выполнения, например params, задает границу между статической и динамической частью страницы.

Переноси await ближе к тому месту, где он реально нужен.

@WebDev_Plus