Если переходите на webpack + AngularJS 1.x, то я бы вам советовал попробовать FountainJS. Он работатет по типу Angular CLI. Очень круто позволяет оптимизировать процесс разработки и убрать ненужные действия. Подумайте о том, чтобы начать использовать TypeScript, если еще не используете :). Ссылок как таковых нет, документация webpack покрывает примерно 80% всех вопросов. Остальное гуглиться достаточно просто. Плюс можно задавать вопросы в их чате, только вот с ответами может быть запара). Хочу заметить, не ждите великой магии от Tree Shaking, если будете транспайлить код в ES5. На хабре было пару статей на эту тему (раз, два), которые хорошо описывают причины такого поведения.
и перебираться пока не собираемся
А вот это вы зря :) Нужно подумать о переходе на новую версию, потому как команда Angular этим летом выпускает стабильную версию AngularJS 1.7 и еще 3 года long-term поддержки. При этом они не будут принимать PR, issue или еще что-то там (: Пруфф
P.S. Я все новые проекты сейчас пишу на последней стабильной версии Angular и стараюсь всем клиентам объснять необходимость миграции на новую версию.
Если в кратце, то вся проблема в сервисе $injector. Учитывая как webpack обрабатывает require.ensure, $injector в свою очередь не находит сам модуль для которого мы применяем require.ensure. ocLazyLoad берет решение этой проблемы на себя.
По поводу шаблона. Ну такое. Спорить не буду. У каждого свои взгляды на это. Как говорится, карандаши на вкус и цвет разные )
А зачем она им?
У меня, например, всегда есть Chrome Canary и FF Developer Edition. Я их использую не для того, чтобы какие-то новые фичи смотреть (хотя и это бывает), а потому что, инструментарий разработчика там намного богаче. В тот же обычный Chrome не выкатывают никакие обновления для разработчиков, пока они не пройдут хорошую обкатку в Canary.
Покажете что за шаблон? Я бы тоже поучаствовал.
Набросал похожий пример (реальный шаблон не могу показать) http://codepen.io/var-bin/pen/yMWoOX К пример, тот же mobile first на grid'ах решается очень изящно. (поизменяйте размеры браузера). Если развить данную тему, взять flexbox, @support, grid'ы, то получиться довольно круто (Progressive Enhancement)
Вы бы хоть скриншоты прикладывали для тех, у кого ваши примеры не работают.
Возможно вы и правы. Думаю, что те кто читают эту статью и у них не завелись примеры, то у них есть developer edition версия браузера. Плюс ко всему, можно включить флаги, и тогда полюбому заведется.
А возможность "не менять хтмл" — уже давно не актуальна, так как сейчас страницы собираются из компонент по шаблонам и шаблон — такой же равноправный код компонента, как и стили и скрипты.
Ну тут не соглашусь. Шаблон я так понимаю из html собирается. Я слабо себе представляю шаблон, который хоть раз не пришлось менять из-за смены поведения какого-то элемента в этом шаблоне или еще чего-то там.
Сила флексбоксов в переносах при переполнении, из-за чего раскладка может динамически меняться, подстраиваясь под размер контейнера (а контейнер — далеко не только окно браузера).
Гриды тоже это все умеют. Единственная с ними проблема (пока) — поддержка. Это да, очень большая проблема. Но CSS Grid Latout очень крут и он прекрасно решает множество задач и при этом не нужно себе "стрелять в ногу".
К примеру. Мы с коллегами пробовали сделать шаблон на flexbox и на grid. Базовая разметка и код на grid заняли намного меньше места и проблем с ними было меньше. Пример, конечно, из вакуума, но все же.
Вы попробуйте CSS Grid Layout для себя, для фана. Я вас уверяю, результатами останетесь довольны )
Да, вы правы. Таких статей хватает. У меня был соблазн написать сразу большую сложную статью. Но я от этой идеи отказался. Потому как даже такие простые штуки как grid-template-columns/grid-template-rows скрывают у себя под капотом очень много сложного. Говорю из своего опыта. Нужно с ними для начала разобраться, постоить с помощью этих штук не один макет, а потом двигаться к таким крутым вещам, как auto-fill, auto-fit, auto-flow, grid-auto-flow, grid-auto-rows, grid-auto-columns и т.д. Также важно понимать как работают алгоритмы расчетов значений, чтобы представлять, что вы получите на выходе.
И только после этого, можно делать что-то сложное.
Статей про такие простые вещи много, потому что каждый, кто начинал сам разбираться с CSS Grid Layout спецификацией находил для себя что-то непонятное, новое, что не было описано во всех предыдущих статьях. Ну и в итоге делился своим опытом в виде статьи. Я не считаю это плохо.
Спасибо за интересный вопрос. Отвечу сначала как сделать так, чтобы высота header'a и footer 'a зависела от контента. Довольно просто, задайте значение auto или можно использовать функцию minmax() со следующими значениями minmax(auto, 10vh). что в свою очередь будет означать: максимам по высоте будет 10vh минимум auto (по контенту).
Вот так почему то работает: grid-template-rows: 0fr auto 0fr;
Конечно работает) Браузер умный и пытается посчитать значение. Тут можно почитать про алгоритм. Если в кратце, то браузер пытается высчитать гипотетическое значение 0_О. Не делайте так ) Вы заставляете страдать браузер.
Добрый день, Александр!
Если переходите на webpack + AngularJS 1.x, то я бы вам советовал попробовать FountainJS. Он работатет по типу Angular CLI. Очень круто позволяет оптимизировать процесс разработки и убрать ненужные действия. Подумайте о том, чтобы начать использовать TypeScript, если еще не используете :). Ссылок как таковых нет, документация webpack покрывает примерно 80% всех вопросов. Остальное гуглиться достаточно просто. Плюс можно задавать вопросы в их чате, только вот с ответами может быть запара). Хочу заметить, не ждите великой магии от Tree Shaking, если будете транспайлить код в ES5. На хабре было пару статей на эту тему (раз, два), которые хорошо описывают причины такого поведения.
А вот это вы зря :) Нужно подумать о переходе на новую версию, потому как команда Angular этим летом выпускает стабильную версию AngularJS 1.7 и еще 3 года long-term поддержки. При этом они не будут принимать PR, issue или еще что-то там (: Пруфф
P.S. Я все новые проекты сейчас пишу на последней стабильной версии Angular и стараюсь всем клиентам объснять необходимость миграции на новую версию.
Добрый день sfi0zy,
Спасибо за статью. Очень познавательно. Как раз развлекаюсь с stroke* параметрами для SVG + анимация. Собирался тоже написать статью про свой опыт и набитые шишки)
Хотел поинтересоваться, а почему сделали выбор в пользу Vue.js?
В принципе, данный подход можно использовать и для сервисов и для контроллеров. В документации к ocLazyLoad есть примеры
Если в кратце, то вся проблема в сервисе
$injector
. Учитывая как webpack обрабатываетrequire.ensure
,$injector
в свою очередь не находит сам модуль для которого мы применяемrequire.ensure
. ocLazyLoad берет решение этой проблемы на себя..
Добрый день!
Спасибо за хорошую новость. Подскажите, стоит ожидать, что появиться расписание докладов и темы до того, как закончаться Early Bird билеты?)
Добрый день
Я так понимаю, вы говорите про Partials @import в sass
Только вы все-таки поменяли разметку )
Жаль, что плюс можно ставить только один раз )
По поводу шаблона. Ну такое. Спорить не буду. У каждого свои взгляды на это. Как говорится, карандаши на вкус и цвет разные )
У меня, например, всегда есть Chrome Canary и FF Developer Edition. Я их использую не для того, чтобы какие-то новые фичи смотреть (хотя и это бывает), а потому что, инструментарий разработчика там намного богаче. В тот же обычный Chrome не выкатывают никакие обновления для разработчиков, пока они не пройдут хорошую обкатку в Canary.
Набросал похожий пример (реальный шаблон не могу показать) http://codepen.io/var-bin/pen/yMWoOX К пример, тот же mobile first на grid'ах решается очень изящно. (поизменяйте размеры браузера). Если развить данную тему, взять flexbox, @support, grid'ы, то получиться довольно круто (Progressive Enhancement)
Добрый день, Дмитрий.
Возможно вы и правы. Думаю, что те кто читают эту статью и у них не завелись примеры, то у них есть developer edition версия браузера. Плюс ко всему, можно включить флаги, и тогда полюбому заведется.
Ну тут не соглашусь. Шаблон я так понимаю из html собирается. Я слабо себе представляю шаблон, который хоть раз не пришлось менять из-за смены поведения какого-то элемента в этом шаблоне или еще чего-то там.
Гриды тоже это все умеют. Единственная с ними проблема (пока) — поддержка. Это да, очень большая проблема. Но CSS Grid Latout очень крут и он прекрасно решает множество задач и при этом не нужно себе "стрелять в ногу".
К примеру. Мы с коллегами пробовали сделать шаблон на flexbox и на grid. Базовая разметка и код на grid заняли намного меньше места и проблем с ними было меньше. Пример, конечно, из вакуума, но все же.
Вы попробуйте CSS Grid Layout для себя, для фана. Я вас уверяю, результатами останетесь довольны )
Добрый день.
Ну не обязательно ) Можно подойти к данной проблеме с другой стороны. Использовать Progressive Enhancement. подход.
Тут согласен. На это нужно обращать внимание.
Добрый день.
Да, вы правы. Таких статей хватает. У меня был соблазн написать сразу большую сложную статью. Но я от этой идеи отказался. Потому как даже такие простые штуки как
grid-template-columns/grid-template-rows
скрывают у себя под капотом очень много сложного. Говорю из своего опыта. Нужно с ними для начала разобраться, постоить с помощью этих штук не один макет, а потом двигаться к таким крутым вещам, какauto-fill
,auto-fit
,auto-flow
,grid-auto-flow
,grid-auto-rows
,grid-auto-columns
и т.д. Также важно понимать как работают алгоритмы расчетов значений, чтобы представлять, что вы получите на выходе.И только после этого, можно делать что-то сложное.
Статей про такие простые вещи много, потому что каждый, кто начинал сам разбираться с CSS Grid Layout спецификацией находил для себя что-то непонятное, новое, что не было описано во всех предыдущих статьях. Ну и в итоге делился своим опытом в виде статьи. Я не считаю это плохо.
Добрый день, Максим.
Да, конечно.
Ну вы явно что-то не так делаете. Покажите на примере. И опишите подробно как вы хотите, чтобы себя вели строки, колонки.
Добрый день, Руслан.
Спасибо за интересный вопрос. Отвечу сначала как сделать так, чтобы высота header'a и footer 'a зависела от контента. Довольно просто, задайте значение
auto
или можно использовать функциюminmax()
со следующими значениямиminmax(auto, 10vh)
. что в свою очередь будет означать: максимам по высоте будет10vh
минимумauto
(по контенту).Конечно работает) Браузер умный и пытается посчитать значение. Тут можно почитать про алгоритм. Если в кратце, то браузер пытается высчитать гипотетическое значение 0_О. Не делайте так ) Вы заставляете страдать браузер.
Добрый день.
Да, полностью согласен. Я знаю много проектов, у которых целевой браузер — это Chrome. Вот где свобода для творчества.
Добрый день.
Да, есть такое. Но можно завтавить машины страдать. И там получается не такая уж и большая куча )
Добрый день.
Спасибо за отзыв. Хорошо, сделаем. Добавлю пункт "Полифилы, Progressive Enhanced для CSS Grid Layout" в следующую статью.