Менять HTML на лету еще никогда не было так просто.

Bun HTMLRewriter API дает низкоуровневый контроль для парсинга, модификации и улучшения HTML через CSS-селекторы, и все это на бешеной скорости. Реализация в Bun основана на Cloudflare lol-html.

Можно переписывать контент из строк, Blob, ArrayBuffer, файлов или даже HTTP-ответов. Есть тонкое управление элементами, текстовыми нодами и комментариями. Идеально, когда нужно подправить HTML прямо в процессе обработки.

@WebDev_Plus

Получите локализованные названия стран и языков с помощью Intl.DisplayNames

@WebDev_Plus

Bun.password упрощает безопасное хеширование и проверку паролей.

Алгоритм, который используется для генерации хеша, хранится внутри самого хеша. Если используется bcrypt, возвращаемый хеш кодируется в Modular Crypt Format для совместимости с большинством существующих реализаций bcrypt. Если применяется argon2, результат кодируется в более новом PHC формате. Функция verify автоматически определяет алгоритм по входному хешу и использует правильный метод проверки. Она корректно определяет алгоритм как из PHC-, так и из MCF-кодированных хешей.

По умолчанию библиотека bcrypt обрезает пароли длиннее 72 байт. В Bun, если передать Bun.password.hash пароль длиннее 72 байт и использовать алгоритм bcrypt, пароль сначала будет захеширован через SHA-512, а затем уже отправлен в bcrypt. То есть вместо того чтобы отправить в bcrypt 500-байтный пароль, который без предупреждения обрежется до 72 байт, Bun сначала прогонит его через SHA-512 и передаст в bcrypt уже получившийся хеш (только если длина превышает 72 байта). Это более безопасное поведение по умолчанию.

@WebDev_Plus

Отличный веб-компонент для создания эффекта спойлера на вашем веб-сайте. Совместим с React, Vue, Angular, Svelte и другими.

> npm install spoilerjs

@WebDev_Plus

Очень интересный ресурс для программистов и веб-дизайнеров. Инструмент для создания анимированных фонов с цветовыми градиентами.

https://www.krumzi.com/tools/animated-background-generator

@WebDev_Plus

Совет по JavaScript:

Можно обернуть аргументы console.log() в фигурные скобки, чтобы в выводе были видны имена переменных.

@WebDev_Plus

Насколько быстрый Bun?

Настолько, что он успел сломать настройку нашей тестовой базы, которая крутится в Docker-контейнере.
Bun выполнил SQL-запросы до того, как база вообще успела подняться. Пришлось прикрутить sleep(), чтобы дать контейнеру время стартануть.

Жесть. С pnpm такого никогда не было.

@WebDev_Plus

Держите полезную 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