WebDev+ | Веб-разработка

Google запустила CodeWiki — платформу, где можно выбрать любой GitHub-репозиторий и получить к нему нормальную документацию с визуализациями, объяснениями и даже видео.

Там еще есть встроенный чат, где можно спрашивать что угодно про репозиторий: архитектуру, функции, связи файлов и прочее.

Скоро появится поддержка приватных реп в GitHub, так что можно присмотреться заранее 🙂

codewiki.google

@WebDev_Plus

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@WebDev_Plus

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

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

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

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

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

@WebDev_Plus

Довольно дико, насколько лучше Angular стал со временем благодаря treeshaking.

610 KB, но там уже есть всё, что нужно для нормальной разработки:

✅ NgRx signals store (с events plugin, по сути как redux)
✅ Tailwind для адаптивной сетки и стилей
✅ Angular Material 3 + тема
✅ Signal forms

@WebDev_Plus

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

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

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

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

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

@WebDev_Plus

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

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

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

@WebDev_Plus

Atomic React-ion

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

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

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

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

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

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

@WebDev_Plus

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

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

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

@WebDev_Plus

⚠️ «Вложенные тернарные выражения могут усложнить понимание кода.»

TypeScript:

@WebDev_Plus

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

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

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

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

@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

CSS карточка с параллакс-эффектом через pointermove и кастомные CSS-переменные

<div class="ring" style="--i: 2">

.ring {
  translate: calc(var(--px) * (var(--i) * -2rem))
             calc(var(--py) * (var(--i) *  2rem));
}

Фишка: координаты курсора мапятся в поворот карточки по 3D-оси,
а кольца двигаются по 2D-плоскости для создания иллюзии объёма 🤙

@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

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

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

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

npx npkill

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

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

@WebDev_Plus

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

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

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

@WebDev_Plus

Совет по JavaScript:

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

@WebDev_Plus

Совет по NgRx на сегодня (и чуть вопрос)

Когда используешь @ngrx/signals/events с

{ providedIn: 'root' }

ты можешь подписаться на события из фичи, которая вообще не инжектит стор.

В таком случае стор может ещё не создаться, и события просто проглотятся 😅

В целом логично, это стандартное поведение DI в Angular, но я почему-то предполагал, что в NgRx есть какая-то магия, которая из коробки стартует «глобальные» сторы (срезы состояния) заранее.

Решение: заинжектить глобальные сторы в app.config.ts (или core.ts), чтобы инстанс стора создавался с самого начала.

@WebDev_Plus

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

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

@WebDev_Plus