В этом выпуске мы поговорим о релизах Chrome и Firefox, узнаем как работать с длинными тасками, найдём утечки Observable, углубимся во View Transition API и посмотрим на другие интересные материалы.


---

**У** npm есть превосходная команда `npm init`, которая поможет вам создавать
`package.json` за секунды!

## npm init

Прочитайте документацию для [`npm init`][init] и [`package.json fields`][pkg].
С крутыми инструментами приходит и большая ответственность. [Изучите их!][docs]

[docs]: https://docs.npmjs.com/
[init]: https://docs.npmjs.com/cli/init
[pkg]: https://docs.npmjs.com/files/package.json

## Переменные для `npm init`

Настройте их! Эти переменные будут использоваться при каждом запуске `npm init`,
а значит будут экономить вам время. После установки они сохраняются
в [`.npmrc` файлах][npmrc].

`npm set` алиас к консольной команде [`npm config set`][config].
К примеру, настройка для меня выглядит так:

```js
npm set init-author-email iamstarkov@gmail.com
npm set init-author-name 'Vladimir Starkov'
npm set init-author-url http://iamstarkov.com/
npm set init-license MIT
npm set init-version 0.0.0
```

Я предпочитаю использовать версию `0.0.0` для старта; это позволяет мне протестировать код
на CI ферме перед тем, как бампнуть первую мажорную версию.

[npmrc]: https://docs.npmjs.com/files/npmrc
[config]: https://docs.npmjs.com/cli/config

## Раскрытие сокращённой GitHub-нотации (user/repo)

Когда `npm init` спросит про гит-репозиторий, пишите кратко `user/repo` —
npm достаточно умён, чтобы раскрыть строчку в `https://github.com/user/repo`.
npm также сгенерирует поля `repository`, `bugs` и `homepage`
в нужном формате:

```js
"repository": {
  "type": "git",
  "url": "https://github.com/user/repo"
},
"bugs": {
  "url": "https://github.com/user/repo/issues"
},
"homepage": "https://github.com/user/repo#readme"
```

_Используй npm мудро, разрабатывай быстрее,_
_ваш [Владимир Старков](http://iamstarkov.com/)_


Ускорьте свою разработку с помощью команды `npm init`


---

**У**ра! Шаблон обновился!

<p style="margin-top: 3rem">А теперь по порядку.</p>

## Что нового

- Дизайн [демки](https://cpt.csssr.ru/) изменился и стал плоским в стиле Flat, а также актуализированы данные инструментов и структуры папок;
- Скрипты собираются в Webpack;
- Все команды запускаются с `npm run <task>`, основная — `npm start`, и глобальная установка `gulp` не требуется;
- PNG-спрайты можно создавать сразу несколько, и теперь они поддерживают Retina&nbsp;дисплей;
- Добавлена документация по работе с PNG&nbsp;спрайтами;
- Разнесены вспомогательные скрипты в NPM, благодаря чему в папке `gulp` находятся только таски, за исключением иконки для&nbsp;уведомлений;
- Удалены неиспользуемые модули;
- Прочие мелкие исправления.

## Планы на следующее обновление

- Добавление блока со стилями, разметкой и скриптом с помощью команды;
- Пересборка и обновление страницы при изменении JSON данных в `app/data` для решения проблему, когда при обновлении данных закэшированные шаблоны тянут с собой старые данные;
- Оптимизация спрайтов через сервис [tinypng.com](https://tinypng.com/) при запуске `npm run build` с флагом `--tinify`;
- Вынос фавиконок в отдельный блок и их подключение по необходимости;
- Звуковой сигнал при ошибках или предупреждениях в Webpack;
- Наполнение документации недостающими нюансами и деталями;

_Вопрос для обсуждения: куда убрать иконку для отображения в уведомлениях, чтобы в папке `gulp` лежали только таски?_

## Заключение

Мы будем рады любой обратной связи. Присылайте пулреквесты в [репозитории&nbsp;на&nbsp;GitHub](https://github.com/CSSSR/csssr-project-template) или предложения и вопросы в [Твиттер](https://twitter.com/csssr_dev).


Блог | CSSSR

История фронтенда. JavaScript как отражение новой эпохи

CSS Grid. Практические примеры

История фронтенда. Браузер, который умел всё

Ускорьте свою разработку с помощью команды `npm init`

Обновление шаблона до v0.12

Подпишитесь на ежемесячную рассылку CSSSR