SVG спрайт с webpack одной строкой

Я имел ввиду использование SVG-стеков из CSS (ссылаться на символ в спрайте по его id — .logo {background-image: url('sprite.svg#logo')}), сейчас это невозможно из-за Safari и Android Browser. Но есть js-полифиллы.

SVG спрайт с webpack одной строкой

Я сам больше за использование SVG из CSS, но поддержка в Safari и Android до 4.4 не позволяет полностью насладиться этой элегантной красотой :)

SVG спрайт с webpack одной строкой

возможность раскраски а-ля иконочный шрифт

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

от data-uri css-ник разбухнет

нет, если их не кодировать в base64, а вставлять как есть, экранировав специальные символы. Так делает svg-url-loader. Тогда объём будет меньше, браузер быстрее парсить такой контент, да и гзипится оно лучше.

Jasmine vs. Mocha, Chai и Sinon

для массивов и объектов нужно использовать assert.deepEqual

Frontend: Разработка и поддержка (+голосование)

Константин, а планируется ли заопенсорсить Feast?

Пособие по webpack

Шутка в тему:
— А как в этот Webpack'e подключить стили?
— Ну тут все просто, ставишь precss, postcss-loader, postcss-import, css-loader, style-loader, file-loader, normalizr, normalizr.css, autoprefixer
— Поставил все как вы сказали, но картинки не загружаются.
— Очевидно вы забыли установить image-webpack-loader

Webpack ProvidePlugin: как не писать простыню import/require в начале javascript модуля

Если так сильно хочется указать зависимость на внешний модуль в CSS (для того чтобы webpack добавил его в свой граф зависимостей) то это можно сделать допилив css-loader. А с PostCSS так вообще открываются необозримые горизонты.

Архив или лапшекод с CSS в JS?

И SVG+PNG в base64 не забудьте. Какая разница во что превращается собранный и минифицированный код? Все всегда смотрят на сорцы.

Нет, это ни во что не транслируется — сборщик берёт граф зависимостей и сериализует его

Я и говорю, это указание на другую зависимость. Импорты это ведь тоже лишь вершины графа.

О глобальных именах

А зачем нужны глобальные имена?

А разные имена одного символа в разных местах приложения — усложнение поддержки на ровном месте.

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

Как вы через консоль сможете обратиться к нужному вам объекту?

Я дебажу точно также как вы написали, ставлю брейкпойнт в нужном месте кода, происходит остановка, где есть доступ ко всему окружению. ЧЯДНТ?

А ещё автономные модули удобнее тестировать, внешние модули можно замокать (полностью или частично).

Векторная замена спрайтам — имплантируем SVG в CSS

SVG-спрайт вставленный через background-image? Тогда проблем в Firefox и правда нет нет, но появляются проблемы при зуме в Chrome :) И цвета не поменять, да.

Webpack ProvidePlugin: как не писать простыню import/require в начале javascript модуля

Как в css-модуле через import прописать зависимость от js-библиотеки modernizr?

Никак, а зачем? Что вы собрались делать с JS-модулем внутри CSS?

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

Как раз таки при помощи webpack все ресурсы модуля упаковываются в один файл и подключать потом нужно только его. Зависимости указываются во входной точке — в JS и это нормально.

Разве жизнь не заиграет красками в отсутствии рутины по регистрации каждого файла в каких либо списках?

Возможно. Но она также заиграет красками неявного поиска зависимостей и возможными ошибками связанными с этим. Откуда брать модуль A, если у меня два разных модуля B/A и C/A?

Вообще-то куда уж более явно — в месте использования. Именно для этого используется специальная нотация с символом доллара вначале — это глобальный идентификатор.

То есть по сути это транслируется в импорт другого модуля? Тогда это тоже самое, только синтаксис другой.

Плохая философия. Изоляция модулей не решает проблему конфликтов имён. От слова вообще. Конфликты имён решаются исключительно пространствами имён.

О каких именах речь? Модуль экспортирует только то что ему положено, код-пользователь может переименовать экспортируемый символ, если такой уже имеется.

А вот дебагом изолированного кода заниматься «одно удовольствие»

Мне сорсмапы помогают.

Webpack ProvidePlugin: как не писать простыню import/require в начале javascript модуля

Модули без единой строчки джаваскрипта это CSS и шаблоны. В CSS зависимости указываются конструкцией @import, в шаблонных движках, например jinja-подобных, зависимости инструкциями типа {% import 'blocks.html' %}. Приведённый вами пример компонента тоже имеет зависимость $mol_block, однако она нигде не указана явно. Видимо предполагается что при сборке её зависимость будет находиться в глобальной области и тогда всё нормально разрезолвится. Философия такая — писать полностью изолированные модули. До появления систем сборки тоже все писали в глобальной области и приятного было мало.

Векторная замена спрайтам — имплантируем SVG в CSS

С этим способом есть очень много проблем у Firefox (#1, #2, #3, список могу продолжать бесконечно). Некоторые баги висят уже почти 10 лет и не фиксятся. Так что инлайн SVG не такая и плохая идея.

Webpack ProvidePlugin: как не писать простыню import/require в начале javascript модуля

Наелся сборщиков типа webpack, где подключение стилей и шаблонов происходит из js, даже если собственно js модулю не нужен.

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

Пишем плагин под webpack

Рекомендую этот плагин github.com/kisenka/webpack-svg-sprite-loader, у него принцип немного другой — вы собираете svg-файлы в спрайт на рантайме, а потом в одном месте говорите спрайту отрендерится в целевую ноду:

// Create sprite instance
var SvgSprite = require('node_modules/svg-sprite-loader/web/svg-sprite');
var sprite = new SvgSprite();

// Add single image to the sprite
sprite.add(require('svg-sprite!images/logos/logo.svg'));

// ...or bunch of them
sprite.add(require.context('svg-sprite!images/logos', false, /\.svg$/));

// Render the sprite
sprite.render(document.body);

Мина замедленного действия из YUI CSS Grids, или еще раз про инлайн-блоки, letter-spacing, word-spacing и браузеры

Есть неудобный, но более надежный способ — проставить контейнеру font-size:0, а затем в потомке вернуть изначальный размер шрифта

Удобное заполнение расписаний с JQuery

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