#ссылка дня

«Что происходит когда ты набираешь google.com в адресной строке браузера и жмёшь ввод?»

Да, котаны, вы угадали: это довольно популярный вопрос на собеседованиях.

Если у тебя его не спрашивали, значит, предполагается, что ты знаешь ответ.

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

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

Максимально полный без открытия книги по архитектуре ПК, я имею в виду.

Вот: https://github.com/alex/what-happens-when

Официального перевода на русский нет, но есть PR: https://github.com/alex/what-happens-when/pull/1462/files

Как вы думаете, котаны, имеет ли смысл в 2023 году вообще такое спрашивать? Должен ли условный фронт это понимать?

#web #interview

#фишка дня

Сейчас в CSS присутствует 54 разных единицы измерения (units).

Пятьдесят четыре!

А ты до сих пор используешь одни только пиксели aka px.

Так вот, используя единицу измерения lh — привязанную к line-height — и свойство background-clip, можно, например, красиво подсветить нужное число строк в любом тексте.

Прям как тут: https://codepen.io/alinaki/pen/xxMJXaV

Поиграйтесь с настройками и шириной блока, получается очень интересно. Автор красоты — Jhey.

А чтобы не запутаться — есть прекрасный ресурс https://whatunit.com/

На нём имеется диаграмма принятия решений, когда какую единицу брать. Если всё ещё непонятно, посмотрите видео от Kevin Powell: https://www.youtube.com/watch?v=Utc_uhvTluk

Он, кстати, автор диаграммы.

В общем, просыпаемся, котаны. Будущее здесь.

#css #rem #lh #vh #measure

#инструмент дня

С места в карьер: утилита qnm предназначена для поиска установленных пакетов в node_modules. Зачем?

Ну, как минимум, это офигенно быстрый способ просмотреть версии всех установленных лично и не очень лично модулей: https://github.com/ranyitz/qnm

Почему ремарка про "не очень лично"? Потому что какой-либо пакет может запросто тянуть за собой более старую или более новую версию некой утилиты, на которую вы так сильно опирались.

Почему-то меня в этом отношении очень раздражает emotion. Его тащат просто куда ни попадя, а у людей потом на CSS-in-JS аллергия...

Так или иначе, посмотреть, почему тот или иной модуль был установлен — это очень полезно.

Моя рекомендация!

#npm #node #package #бородач

#автор дня

Олды помнят, что я пытался ввести эту рубрику, но как-то подзабил.

И это при том, что инфлюенсеров в мире фронтенда (ну так уж повелось, что канал больше об этом) не так уж и много на самом деле. Впрочем, потому и упоминаются достаточно часто.

Тем не менее, некоторые из них достойны отдельного поста. И сегодня — Ана Тюдор (Ana Tudor).

Она, кстати, не Анна, она — Анастасия, если уж полное имя рассматривать.

Чем известна? О, ну тут вопрос, с чего бы начать. По-моему, самой популярной её работой является коллекция "ползунков" — виджетов для ввода диапазонов, CodePen. Все на базе нативных полей, с минимумом JS. Бери и пользуйся.

Так же раньше она очень много писала для ресурса CSS Tricks, но сейчас больше фокусируется на демо для YouTube-канала.

Кстати, о демо. Опять же, на CodePen представлено невероятное количество её работ, сгруппированное по категориям, от абстрактных геометрических экспериментов до весьма практичной инфографики.

А уровень её использования CSS-переменных вообще где-то за гранью.

Ну и недавняя простая, но эффектная демка с анимированным градиентным текстом — тоже её.

В общем, Ана не то чтобы нуждалась в моей рекомендации, но если вы о ней не знали до этого момента, надеюсь, этот пост был полезен :)

#css #art #author

#баг дня

Сегодня Google опрокинул миллионы пользователей расширений Google Sheets.

Для многих станет сюрпризом, но этот рынок огромен: аналитика, SEO, рассылки, бюджет, ведение рекламных кампаний, анализ опросов из Google Forms... всё там.

Только у нашего расширения — под миллион установок, например.

Так вот, когда-то давно в Chrome 83 появилась очередная директива Content-Security Policy (CSP): Trusted Types.

MDN: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types

Web.Dev: https://web.dev/articles/trusted-types

Когда она включена, любую загрузку скриптов надо предварительно одобрить. Любое изменение innerHTML и документа вообще — тоже.

Звучит разумно? Давайте дальше.

Практически любой скрипт на свете использует innerHTML, но это полбеды. Если директива неправильно описана, загрузка и исполнение скриптов внутри iframe тоже становится невозможной.

И сегодня в Google Sheets появился заголовок, включающий директиву, а код настройки — нет.

Масштабы ошибки оказались сокрушительными. Полегли все расширения Google Sheets, просто потому что каждое из них использовало какой-нибудь скрипт, загружающийся извне. Повторю, миллионы пользователей потеряли возможность нормально работать.

Ах да, директива учитывается только в Chrome 🤡

Баг-трекер: https://issuetracker.google.com/issues/313466551

Мы достаточно быстро нашли решение и указали на него в трекере, но далеко не все разработчики отреагировали так же быстро, потому ситуация остаётся плачевной.

А решение, собственно, заключается в минимальной настройке директивы.

Это то, что должны были сделать разработчики Google Sheets:

<script>
  if (window.trustedTypes && window.trustedTypes.createPolicy) {
    window.trustedTypes.createPolicy('default', {
      createHTML: string => string,
      createScriptURL: string => string,
      createScript: string => string,
    });
  }
</script>

В общем, день был насыщенный.

P. S. По состоянию на 23:00 EET, Google откатывают изменения.

#google #sheets #workspace #bug

#фишка дня

Кричащий банан 🍌 (да-да) принёс шикарную фишку TypeScript: как типизировать ключ объекта без каста.

Решение: заранее объявите тип переменной перебора как keyof typeof. Всё, вы великолепны.

Пруф на TS Playground.

#typescript #cast

#статья дня

С чего начать построение своего веб-секвенсора?

Конечно же с изучения Web Audio и Web Midi API!

Статья Мэдса Стоуманна рассказывает не только о том, как сверстать свою MIDI-клавиатуру и потыкать в неё мышкой, чтобы послушать звуки, но и как подключить настоящую MIDI-клавиатуру и даже подсветить аккорды: https://blog.logrocket.com/exploring-web-audio-api-web-midi-api/

Ну и, конечно, сразу демо: https://codepen.io/alinaki/pen/jOdeqRv

Есть у кого MIDI-синтезатор, кстати? Делитесь результатом!

#web #audio #grid #music #бородач

#опрос дня

Какой тип получит Entity?

#заметка дня

Итак, объяснение результатов опроса выше. Поехали.

Пока я думал, как написать, и искал время, в комментариях к опросу уже всё сделали. Аж дважды. И даже обняться успели.

Потому, буквально, цитата:

1) Что такое тип Omit? А вот что:

type Omit<T, K extends string | number | symbol> = { [P in Exclude<keyof T, K>]: T[P]; }

2) Видим, что там есть Exclude<keyof T, K>. Пока все безобидно, куда же делись наши поля?

3) Обращаем внимание на keyof T. Эта конструкция возвращает все ключи, что есть у объекта и к которым можно обращаться без ошибки (!).

И именно здесь отсекаются все поля, которых нет во всех наших типах объединенных через символ | (Union) потому что мы не можем обращаться к полям "price" и "name" без доп. проверок (type guards)

Автор комментария не против, если что 🙂

А для всех заинтересованных, вот ссылка на TS Playground.

#инструмент дня

Давайте честно, процесс сборки откровенно раздражает.

Да, мы живём в 2023 году и вполне можем себе позволить использовать импорты и модули вообще без транспиляции кода и сборки.

Вот только с тем же кодом на React (да и не только, JSX сейчас много где) так не получится.

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

К счастью, есть некое решение! И это решение — https://esm.sh/

Это автоматический сборщик и хостинг модулей на Deno в одном флаконе, если уж совсем грубо.

И вот недавно они релизнули новую часть проекта — поддержка кода, задекларированного в тегах script. Кривовато написал...

Давайте я сразу покажу пример: https://codepen.io/alinaki/pen/NWoERwW

Что тут происходит?

1. Запихиваю приложение в <script>, указывая тип text/babel (так повелось, что тогда VS Code его подсветит).

Тип такой нужен, чтобы браузер исполнять не полез.

2. Чуть выше импортирую скрипт для «сборки» (какая ирония): https://esm.sh/run

3. ...

4. Работает!

5. В примере я объявил importmap чтобы писать названия модулей так, будто у меня есть package.json. Но esm и просто ссылки поддерживает, дублируя npm и обогащая своими плюшками.

Штука забавная, на самом деле. Можно хостить самому, не опираясь на CDN.

Изначально я пробовал другой их продукт, build. Он собирает модули на лету, весьма удобно, рекомендую. Правда, немного задолбался с тем, что среда требует чёткого указания MIME-типа файла, а GitHub Pages отдают jsx как text/jsx и так далее. И настроить нельзя :( Так что для такого проекта надо брать полновесный хостинг.

Так или иначе, оно завелось! Для демок точно прекрасно, для кода, требующего ремонт на лету — тоже, вполне.

#js #module #esm

#codepen дня

Как понять режимы смешивания (блендинга, mix-blend-mode) в CSS?

Можно, конечно, обмазаться математикой и сидеть дёргать ручки в DevTools, а можно открыть сегодняшний кодпен: https://codepen.io/jh3y/pen/OJXrVME

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

Если кому интересно, что это за интерфейс управления такой — это dat.GUI: https://github.com/dataarts/dat.gui

Описываете конфигурацию и переменные, которыми желаете управлять, загружаете их в dat — и получаете возможность менять их на лету. Очень популярная штука в разных демках, особенно в WebGL.

#mix #blend #css #бородач

#заметка дня

Хочу сказать пару слов про файлы-реэкспорты aka index.js. В англоязычном сегменте разработчиков их ещё бочками зовут — barrels. Кори Хауз сегодня в тви напомнил :)

Задачи бочки просты:
✅ Сократить путь импорта
✅ Дать возможность импортировать несколько модулей из одного места
✅ Предоставить некий публичный контракт.

Мол, если вы используете что-то не задекларированное в index.js — сами себе злобные буратины.

Вот только минусов-то побольше будет:
🚫 Раздувает бандл, ведь тришейкинг становится невозможным
🚫 Потребление памяти тоже возрастает, обработать-то файл надо
🚫 Замедляет сборку
🚫 Мешает навигации по коду, когда опция "перейти к определению" кидает тебя в реэкспорт.

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

Вот правило для ESLint чтобы найти у себя это в коде и больше так не делать: https://github.com/christianvuerings/eslint-plugin-no-re-export, там же есть и побольше информации.

А у вас дела как, котаны?

#js #ts #module

#такое дня

Не знаю, в какую рубрику это поместить, да ещё и чуть не пропустил...

Котаны, языку JavaScript сегодня исполнилось 28 лет!

4 декабря 1995 года после фееричных 10 дней разработки Брендан Эйх представил компании Netscape язык LiveScript, предназначавшийся для встраивания в их всё ещё свежий и самый популярный в мире браузер.

Но яйцеголовые маркетологи были уже тогда, потому язык быстренько обозвали JavaScript и выкинули на рынок как есть. Да, история немного сложнее и они реально собирались создать упрощённый вариант Java и JVM, но уж получилось как получилось.

Продавать это всё равно решили как простое решение для добавления интерактива на веб-страницы используя ваши существующие ресурсы в виде программистов на Java.

В итоге, JavaScript прошёл все круги издевательств, особенно от Microsoft. Был стандартизирован как EcmaScript, а году так в 2008 его даже называли СНЯП: Самый Недооценённый Язык Программирования.

Ну в 2023 году мы с вами точно можем сказать, что если кого и недооценили — то это точно не JS.

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

#js #jscript #ecmascript

#заметка дня

Cегодня буду краток. Стал забывать, что у многих +1 час к моему времени.

Я часто вижу в профильных чатах вопросы типа: «Помогите, истерика, текст не занимает всю ширину контейнера и мой флексбокс не работает!»

Короче, происходит ситуация, как на картинке: кажется, что место справа никак не используется.

Ладно бы только начинающие такое спрашивали, но нет же. У всех дыры и паника, паника и дыры.

А суть в том, что рендер текста — это сложно. Рендер длинных слов — это очень сложно.

Потому браузер всегда выделяет для текста максимально возможную ширину. Неважно, ограничили ли вы её условиями флексбокса или установили max-width. Возьмёт всё и начнёт упихивать буквы и слова. Как сможет.

Пример расчётов можно посмотреть в серии статей Инлайновый контекст форматирования, раздел «Горизонтальное выравнивание».

Подсказка: он не сможет. И выделенное место не вернет.

А люди ожидают, что текст спокойно сдвинется вправо и у чекбокса будет больше воздуха. К сожалению, так не получится вообще никак.

Единственно, кажущееся разумным, решение — это заполнить всю предоставленную ширину, используя переносы (словарь или &shy;). Ну или word-break: break-all;

Есть ещё не очень разумные решения с использованием JavaScript для подсчета реально занимаемой ширины.

Вот три примера: https://codepen.io/alinaki/pen/ExrGRwL?editors=1100

Не паникуйте, ну.

#css #flex #render

#фишка дня

Один из моих любимых вопросов на собеседованиях был про поведение Array.prototype.sort().

Вы не представляете какое количество людей просто не задумывается о том, что sort — мутирующий метод, то есть он возвращает не новый массив, а ссылку на изменённый текущий.

Да, в большинстве случаев ничего страшного не произойдёт, но в остальных — будет неприятно.

Так вот, к чему это я. С выходом Firefox 115 в июле этого года мы получили иммутабельные методы работы с массивами во всех браузерах:
.toReversed()
.toSorted()
.toSpliced()
.with()

Если что, with — это про замену элементов по индексам.

Есть и полифиллы на core-js, так что без работы никто не останется.

И это прекрасно.

#js #array #sort #бородач

#фишка дня

Поскольку селектор has почти прилетел во все браузеры (Firefox 121 вот-вот выйдет), самое время использовать его для чего-то более прозаичного, нежели анимации а-ля macOS Dock: https://t.me/htmlshit/1873

Как вам, например, подсветка колонок в таблице? Ведь без JS эту задачу было решить довольно сложно.

Самый популярный способ подсветки без JS на сегодняшний день — создать очень (очень) высокий псевдоэлемент и показать его по ховеру: https://css-tricks.com/simple-css-row-column-highlighting/

Но это, конечно, какой-то стыд. Хочется что-то чуть менее колхозное.

И, наконец, мы можем это сделать!

Пример от Стэна Хуугарда: https://codepen.io/alinaki/pen/oNmmooN

Значащий код:

table:has(td:nth-child(5):hover) {
  td:nth-child(5) {
    background: var(--hover);
  }
} 

Что тут происходит? Всё просто: если в таблице имеется (has) наведённый мышью пятый (nth-child) элемент в любой строке, надо подсветить все остальные пятые элементы в каждой строке таблицы вообще.

Дыхание будущего! Правда, всё немного портит хардкод номера ячейки... но можно просто сгенерировать сразу штук 10.

По-моему, это решение ну в разы приятнее высоких псевдоэлементов.

Как вам, котаны?

#css #has #table

#заметка дня

Последние дни в чате и общение с начинающими свой путь в разработку знакомыми наткнули меня на пост дедовского нытья.

И нытьё это о процессе изучения программирования вообще и веб-разработки в частности.

TL;DR веб-разработка никогда не была настолько простой, а процесс обучения ей — настолько усложнённым.

Теперь давайте по порядку. Будет 2-3 части и некий итог. Если хотите коротко — рекомендую дождаться итога. Я пытаюсь создать атмосферу.

Мне 36 лет и я уже на полном серьёзе могу применять фразы вроде «моё поколение». Так вот, это самое моё поколение начинало изучение программирования на интегрированных средах разработки — IDE. Сначала это был Turbo Pascal, но очень быстро мы все переползли на Delphi.

Почему я упоминаю IDE вообще? Всё просто, секрет в той самой букве I, «интегрированности».

За свои деньги (2002 год в РФ, конечно же за деньги, что вы, что вы) вы получали:
1. Справочник по языку
2. Текстовый редактор с автоподстановкой
3. Визуальный конструктор интерфейса (буквально мышкой размещать компоненты!)
4. Компилятор
5. Отладчик

Что на выходе? А на выходе рабочее desktop-приложение под де-факто одну доминирующую платформу. Напомню, минут 30 назад вы всего лишь перетащили кнопку из палитры на окошко и кликнули по ней дважды, получив готовый код обработчика события нажатия.

В 2002 году при этом веб-разработка была уже устоявшейся, но не считалась серьёзной, особенно после бума дот-комов. Если интересно, я раздам расклад, но мы всё-таки попробуем сфокусироваться на фронтенде.

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

Да, были редакторы вроде Front Page и DreamViewer, но это считалось примерно тем, чем сейчас считаются Tilda и Framer: не для серьёзных пацанов.

У вас был браузер (IE или Netscape 6), блокнот и сочетание клавиш Ctrl-U для просмотра кода страниц. Всё.

Уже подготовленные знанием о том, что для работы кнопки по нажатию нужно писать какой-то код мы находили на интересующем сайте саму кнопку, нажимали Ctrl-U, искали её в коде страницы, копировали в блокнот. Потом искали в коде этой же страницы всё, что могло быть с этой кнопкой хоть как-то связано и чаще всего находили кусок JavaScript в теге <script>.

Иногда ничего не находилось, но после просмотра всего, что хоть как-то походило на ссылку с расширением js улыбалась удача и приходило понимание: код можно хранить в других файлах. И опять начинался процесс поиска, чтобы заставить кнопку показать alert().

Естественно, потом бралась в школьной же библиотеке куча книг с названиями вида Dynamic HTML, DHTML, "веб-мастер" где серьёзные дяди на серьёзных щах рассказывали как написать калькулятор или прилепить к курсору мыши снежинки. Так приходило понимание работы с DOM.

Пост становится слишком длинным, потому я рискну выпустить эту часть к полуночи и понять, нужно ли вам продолжение, уже утром. Дайте знать 🙂

#заметка дня

Продолжаем

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

Каждый интернет-провайдер в те годы давал возможность разместить «персональную веб-страницу» с диким адресом вроде http://example.com/~username.

Даже поддержка Perl и иногда PHP имелась, зависело от вашего умения ныть по телефону техподдержке. Как вы понимаете, этим стоило пользоваться. А ещё был легендарный narod.ru, но туда можно было грузить только простой HTML и сопутствующие файлы, что не мешало многим строить целые миры.

То есть, чтобы распространить результат, нужно было наляпать что-то в блокноте и загрузить это на FTP провайдера, обозвав index.html или index.php. Всё!

К этому моменту многие могли потерять мысль, но я всё же выражу её ещё раз: кроме блокнота и браузера не нужно было ничего, а масштабы распространения были при этом безграничны.

Вполне логично, что в какой-то момент хотелось сделать, например, книгу посетителей, отзывы... чат. Для этого применялись языки на сервере, тот же PHP, которые генерировали некий HTML код. Ни о каком изменении содержимого без перезагрузки страницы речи пока не шло: вы отправляли форму кнопкой Submit, сохраняли значения куда-то в базу данных или файл, потом генерировали при помощи PHP новый HTML и возвращали его обратно. Каждый раз всю страницу целиком.

JavaScript так и использовался в большинстве случаев для того, чтобы сделать снежинки.

Gmail, перевернувший мир, появился только в 2004.

Всё это хотелось сделать красиво, потихоньку набирал обороты CSS, который изначально буквально был нужен чтобы убрать подчёркивание у ссылок при наведении. Но уже от этого был восторг. Веб-страницы так и верстались при этом таблицами, даже до понятия семантики было ещё лет 10.

Я не планировал связывать свою жизнь с вебом и после 2004 года выпал на несколько лет. Вернувшись уже профессионально в 2009 году, я с удивлением обнаружил, насколько всё стало больше. При этом веб как был ориентирован на генерацию страниц на сервере, так и остался.

Но, хвала Gmail, дико распространился AJAX! Если коротко, это загрузка контента без перезагрузки страницы.

При этом JavaScript-файлы так и оставались чем-то отдельным и обособленным, но их роль уже заключалась в том, чтобы обработать какое-то событие нажатия на элементе, выполнить AJAX-запрос, получить в ответ, опять же, кусок HTML и вставить на страницу.

Где-то в эти же года (2006) на сцену вышел jQuery, который сразу обозначил свою позицию:
- безумно простой AJAX
- безумно простые анимации
- безумно простые обработчики кликов по элементам

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

Но он дал нам кое-что ещё, и это самое важное: систему плагинов. Это время расцвета каруселей, кастомных селектов, попапов и лайтбоксов. Подключали плагин, описывали свои правила его работы и вперёд. Именно в это время распространяется IIFE: это был на тот момент лучший способ делать независимые модули.

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

Чувствуете, куда подбираемся? Да, дамы и господа. К системам сборки и минимизации кода. Как раз в 2009 году вышла первая версия Node.js.

И вот об этом-то через несколько часов и будет следующая часть.

#заметка дня

Как я уже сказал, будет три части и итог. Это третья часть. В двух сообщениях.

В 2009 году я для себя базой выбрал Drupal, CodeIgniter и jQuery. Вёрстку к тому времени изучил по Маниакальному веблогу, за что Ивану Сагалаеву огромное спасибо, база оттуда осталась неизменной.

В 2010 году появляется Angular 1. Где-то в то же время нарастает движение HTML5 против XHTML 2.0, в ход вступает семантика и то, что называлось «вёрсткой на дивах» становится «семантической вёрсткой». У нас уже есть Firefox, Safari и только-только появился Chrome. IE предстояло потесниться.

Конечно, были ещё Ext.js, Backbone и Marionette, Dojo, MooTools...

Я плавно подвожу к тому, что с 2009 по 2014 год веб сильно рос. Именно с той поры пошли шутки про новые фреймворки каждый день, и это не было преувеличением.

Рост массы JS-кода был лавинообразным, но до какого-то момента было всё равно: ты подключал кучу файлов и не парился.

Но в какой-то момент это всё же стало зачастую превышать разумные пределы, потому появились инструменты для минификации и обфускации кода; для сжатия картинок.

Требовалось что-то для сборки шаблонов и упрощения вёрстки. Так родился Gulp, позволявший выполнять задачи по порядку: собрать JavaScript-файлы в кучу, минимизировать их, сжать картинки, склеить HTML...

К 2015 году появилась концепция ES6/ES2015, ES-модулей. К тому времени уже был Node.js с CommonJS и его require(), но все хотели стандартов; Node.js-вариант не всем нравился и имел свои минусы, хотя на фронтенде его можно было использовать через Gulp и Browserify, что многие очень активно и делали.

Крупные разработчики стали обращать своё внимание на такой простой и детский JavaScript и резко захотели приблизить его к индустриальным стандартам.

Естественно, браузеры все новые фишки JS не поддерживали, потому вместе с идеей ES6 родился и «транспилятор» Babel.js, который можно было использовать как прямо на странице, так и в своих сборках на Gulp.

Помните я в первой части рассказывал про IDE, в которой было всё? Я не упомянул одну важную штуку: линковщик. Или, собственно, сборщик. Чтобы скомпилированный код собрать в один исполняемый EXE-файл вместе со всеми ресурсами, картинками, иконками и звуками именно его и нужно было использовать.

И как раз вместе с концепциями ES6, ES2015 и ES Modules на рынок вышел Webpack, принёсший идею сборщика в веб.

Отличием Webpack от Gulp стало то, что он именно что собирал всё, что вы ему передали, в один огромный JS-файл. Webpack катком прошёлся по стандарту модулей и позволил импортировать CSS, SCSS, LESS, HTML, JS, JSON, SVG и даже картинки вообще простой директивой import! Это совпало с ростом запросов на одностраничные лендинги от бизнеса, где такой подход потрясающе себя оправдывал.

Случился настоящий взрыв. Разработчики, привыкшие к идее сборщиков на серьёзных системах, прониклись идеей максимально.

А Node.js к 2014-2015 году уже доказала свою полезность не только как серверная среда, но и как пакетный менеджер и основа для запуска бесконечного количества JS-кода для инструментов сборки и выполнения задач.