Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 30
похвальное начинание. дальше на пути вас ждёт минимум browserify, а лучше сразу webpack с их дивными мирами трансформаций/лоадеров/плагинов. и создание генератора для yeoman.
Следующим шагом был бы генератор для yo
Самая интересная киллер-фича для меня, это то, что он собирает ассеты любого типа, будь то картинка или шрифт.
Например, можно установить font-awesome из npm и добавить require('font-awesome/less/font-awesome.less'); после чего webpack заботливо соберет все ассеты (все шрифты) в отдельную папочку, доступную из веба.
Например, можно установить font-awesome из npm и добавить require('font-awesome/less/font-awesome.less'); после чего webpack заботливо соберет все ассеты (все шрифты) в отдельную папочку, доступную из веба.
Есть. Кардинальные. Они достаточно четко описаны на «главной» webpack.
«и создание генератора для yeoman»
Это, на мой взгляд, самый верный путь для решения задач такого рода. Но у йомена есть большой минус — он жутко долго стартует. И пока они это никак не починят.
Это, на мой взгляд, самый верный путь для решения задач такого рода. Но у йомена есть большой минус — он жутко долго стартует. И пока они это никак не починят.
По своему опыту скажу, что очень сложно разработать build систему, которая будет устраивать хотя бы 10% пользователей исключая разработчиков такой системы. У каждого проекта свои проблемы и способы их решения. В большинстве случаев, наиболее полезная часть — структура и описание, как система работает, чтобы другие разработчики смогли перенять интересные идеи и реализовать их у себя в проектах.
Вероятно лучше было задать вопрос в топике про спрайты, но да не суть.
А для каких целей до сих пор используются спрайты?
Я пару лет назад перешел на вариант иконок прямо в css файлах.
Всякие Stylus'ы как раз позволяют писать в CSS что-то типа
что преобразовывается в base64 инлайн картинку.
Плюсы:
— Хорошо кэшируется вместе со стилями
— Позволяет не заморачиваться с позиционированием картинки / её анимацией
— Отображается даже в случае отключенной графики (обращаю внимание что подход только для маленьких иконок)
Минусы:
— Может не работать в старых браузерах, хотя их процент, в большинстве проектов, ничтожно мал
— Требует надстройки в виде stylus/sass/less или подобной, хотя, опять же, они у вас и так используются
А для каких целей до сих пор используются спрайты?
Я пару лет назад перешел на вариант иконок прямо в css файлах.
Всякие Stylus'ы как раз позволяют писать в CSS что-то типа
background-image: inline-image(somefolder/star.png)
что преобразовывается в base64 инлайн картинку.
Плюсы:
— Хорошо кэшируется вместе со стилями
— Позволяет не заморачиваться с позиционированием картинки / её анимацией
— Отображается даже в случае отключенной графики (обращаю внимание что подход только для маленьких иконок)
Минусы:
— Может не работать в старых браузерах, хотя их процент, в большинстве проектов, ничтожно мал
— Требует надстройки в виде stylus/sass/less или подобной, хотя, опять же, они у вас и так используются
Чуть-чуть поясню, на всякий случай.
Для чего до сих пор используются спрайты для иконок на сайтах?
Со спрайтами для онлайн игр всё понятно
Для чего до сих пор используются спрайты для иконок на сайтах?
Со спрайтами для онлайн игр всё понятно
Есть мысли о реализации base64 для небольших иконок.
Тот спрайтер, что у меня установлен, решает вопросы с позиционированием сам.
Тот спрайтер, что у меня установлен, решает вопросы с позиционированием сам.
Ты же написал что Stylus юзаешь, ну так всё уже готово: url()
upd: тьфу, не сразу сообразил что имеешь ввиду. Тогда вопрос остается: в чем плюс спрайтов перед таким подходом?
upd: тьфу, не сразу сообразил что имеешь ввиду. Тогда вопрос остается: в чем плюс спрайтов перед таким подходом?
Большие картинки, например
Можно какой-нибудь живой пример, пожалуйста?
Большие картинки класть в спрайты, как мне кажется, не лучшая идея.
Есть шанс, что итоговый спрайт будет весить больше, чем картинки по отдельности, при этом выигрыша не дает.
Обычно на сайте больших картинок, именно в стилях, буквально пару штук: разные HD фоны или типа того.
Обычные же картинки на странице так или иначе грузятся через img, а не через стили.
Большие картинки класть в спрайты, как мне кажется, не лучшая идея.
Есть шанс, что итоговый спрайт будет весить больше, чем картинки по отдельности, при этом выигрыша не дает.
Обычно на сайте больших картинок, именно в стилях, буквально пару штук: разные HD фоны или типа того.
Обычные же картинки на странице так или иначе грузятся через img, а не через стили.
Я раньше когда генерил base64 получалось много лишних кб, но это без оптимизации. Вес получался больше, чем исходное изображение.
Как пример вот maindoor.ru/assets/bootstrap/images/sprites/sprite_l.png
Нужно провести тесты
Как пример вот maindoor.ru/assets/bootstrap/images/sprites/sprite_l.png
Нужно провести тесты
Я уже проводил. В среднем 10-20% тяжелее оригинала.
При этом, надо обратить внимание, что если правильно выбрать шифрование оригинала, даже с прибавкой в 10-20%, суммарно будет меньше спрайта, т.к. спрайты не могут шифроваться по разному. Можно у Лебедева чуть чуть почитать.
А если есть возможность использовать SVG для иконок, то они вообще такие копейки весят, что аж смешно. На самом деле грузятся и отрисовываются очень быстро, еще и перекрашивать можно.
При этом, надо обратить внимание, что если правильно выбрать шифрование оригинала, даже с прибавкой в 10-20%, суммарно будет меньше спрайта, т.к. спрайты не могут шифроваться по разному. Можно у Лебедева чуть чуть почитать.
А если есть возможность использовать SVG для иконок, то они вообще такие копейки весят, что аж смешно. На самом деле грузятся и отрисовываются очень быстро, еще и перекрашивать можно.
И еще спрайты очень вошли в привычку
Что можете посоветовать для Angular JS 2.0?
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Автоматизированный шаблон для front-end проектов