Styling #3

lex111 · 2018-08-20T18:25:04Z

No description provided.

lex111 · 2018-08-20T18:25:25Z

@katienazarova посмотри, пожалуйста.

LinchSmyth

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

LinchSmyth · 2018-08-22T10:36:35Z

manuscript/06_Styling.md


-In this part, you will learn about styling-related concerns in detail including loading styles, refreshing styles during development, separating CSS, eliminating unused CSS, and autoprefixing.
+В этой части вы подробно узнаете о проблемах, связанных с стилем, включая загрузку стилей, обновление стилей во время разработки, разделение CSS, исключение неиспользуемого CSS и автоматическое добавление браузерных префиксов.


связанных с стилем ...

правильнее будет:

связанных со стилями ...

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

связанных с каскадными таблицами стилей ...

LinchSmyth · 2018-08-22T10:38:45Z

manuscript/styling/01_loading.md


-The matched files can be processed through loaders like [file-loader](https://www.npmjs.com/package/file-loader) or [url-loader](https://www.npmjs.com/package/url-loader), and these possibilities are discussed in the *Loading Assets* part of the book.
+Соответствующие файлы могут обрабатываться через загрузчики, таких как [file-loader](https://www.npmjs.com/package/file-loader) или [url-loader](https://www.npmjs.com/package/url-loader), и данная возможность обсуждается далее в части *Загрузка ресурсов*.


не

через загрузчики, таких как

a

через загрузчики, такие как

LinchSmyth · 2018-08-22T10:44:27Z

manuscript/styling/01_loading.md


-*style-loader* injects the styling through a `style` element. The way it does this can be customized. It also implements the *Hot Module Replacement* interface providing for a pleasant development experience.
+*style-loader* внедряет стилизацию через элемент `style`. То, как он это делает, можно настроить по-своему. Этот загрузчик также реализует интерфейс *горячей перезагрузки модулей*, обеспечивающий приятный опыт при разработки.


внедряет стилизацию через элемент

я думаю стоит уточнить, что здесь идет речь о "HTML-элементе", или "теге":

внедряет стилизацию через тег style

LinchSmyth · 2018-08-22T10:45:37Z

manuscript/styling/01_loading.md


 ```bash
 npm install css-loader style-loader --save-dev
 ```

-Now let's make sure webpack is aware of them. Add a new function at the end of the part definition:
+Теперь давайте убедимся, что webpack знает о CSS-файлах. Добавить новую функцию в конец файла с определениями:


не "Добавить", а "Добавим" или "Добавьте"

LinchSmyth · 2018-08-22T10:46:31Z

manuscript/styling/01_loading.md

@@ -53,17 +53,17 @@ leanpub-end-insert
 ]);
 ```

-The added configuration means that files ending with `.css` should invoke the given loaders. `test` matches against a JavaScript-style regular expression.
+Добавленная конфигурация означает, что файлы, заканчивающиеся на `.css`, должны вызывать указанные загрузчики. `test` сопоставляет стилевой файл с регулярным выражением JavaScript.


я думаю лучше будет файл стилей вместо стилевой файл

LinchSmyth · 2018-08-22T12:18:55Z

manuscript/styling/03_eliminating_unused_css.md


-W> Using PurifyCSS loses CSS source maps even if you have enabled them with loader specific configuration due to the way it works underneath.
+W> Использование PurifyCSS теряет карты кода CSS, даже если вы включили их с определенной конфигурацией загрузчика из-за того, как он работает под ним.


я думаю более верно:

Использование PurifyCSS приводит к потере карт кода CSS, даже если вы включили их с определенной конфигурацией загрузчика, из-за своей внутренней обработки.

LinchSmyth · 2018-08-22T12:24:21Z

manuscript/styling/03_eliminating_unused_css.md


-The idea of [critical path rendering](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/) takes a look at CSS performance from a different angle. Instead of optimizing for size, it optimizes for render order and emphasizes **above-the-fold** CSS. The result is achieved by rendering the page and then figuring out which rules are required to obtain the shown result.
+Идея [отрисовки критического пути](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/) рассматривает производительность CSS с другой точки зрения. Вместо оптимизации размера, он оптимизирует порядок отрисовки и выделяет CSS **в верхней части страницы (above-the-fold)**. Результат достигается путем отрисовки страницы, а затем выяснения, какие правила необходимы для получения позитивного результата.


на хабре, "отрисовка критического пути" уже переведена как "критический путь рендеринга", и является более верным переводом. Я добавил это в словарь, так что просмотри где еще ты использовал этот термин.

Ок, только использовать будем вместо рендеринга - отрисовку, хорошо?

LinchSmyth · 2018-08-22T12:29:49Z

manuscript/styling/03_eliminating_unused_css.md

+* Исключить неиспользованный CSS можно с помощью PurifyCSS. Он выполняет статический анализ с источником.
+* Эта функциональность может быть включена через *purifycss-webpack*, и плагин следует применять *после* `MiniCssExtractPlugin`.
+* В лучшем случае PurifyCSS может исключить большинство, если не все, неиспользуемых CSS-правил.
+* Отрисовка критического пути — это еще одна методика CSS, которая подчеркивает сначала отрисовку CSS в верхней части страницы. Идея состоит в том, чтобы сделать что-то как можно быстрее, а не ждать загрузки CSS.


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

LinchSmyth · 2018-08-22T12:30:57Z

manuscript/styling/03_eliminating_unused_css.md


-In the next chapter, you'll learn to **autoprefix**. Enabling the feature makes it more convenient to develop complicated CSS setups that work with older browsers as well.
+В следующей главе вы узнаете **autoprefix**. Включение возможности упрощает написание вручную сложных настроек CSS, предназначенные для работы со старыми браузерами.


узнаете об

Включение этой возможности ...

предназначенных

LinchSmyth · 2018-08-22T12:32:16Z

manuscript/styling/04_autoprefixing.md

@@ -43,7 +43,7 @@ leanpub-end-insert
 ]);
 ```

-To confirm that the setup works, we have to add something to autoprefix. Adjust the CSS:
+Чтобы проверить, что настройка работает, нам следует что-нибудь добавить, измените CSS для того, как показано ниже:


убери для того

lex111 · 2018-08-22T14:16:08Z

@LinchSmyth спасибо, исправил замечания.

LinchSmyth

вот теперь отлично! Только пара не критичных помарок.

LinchSmyth · 2018-08-23T12:29:28Z

manuscript/styling/01_loading.md

@@ -84,13 +84,9 @@ leanpub-end-insert
 ...
 ```

-Выполните «npm start» и перейдите на «http: // localhost: 8080», если используете порт по умолчанию и откройте * main.css * и измените цвет фона на нечто вроде `lime` (` background: lime`) ,
+Выполните `npm start` и перейдите по URL-адресу `http://localhost:8080`, если используете порт по умолчанию, а затем откройте *main.css* и измените цвет фона на что-нибудь другой, например на `lime` (`background: lime`).


что-нибудь другой -> какой-нибудь другой

LinchSmyth · 2018-08-23T12:30:03Z

manuscript/styling/01_loading.md

@@ -100,14 +96,10 @@ T> В приложении *CSS-модули* обсуждается подхо

 ![Less](images/less.png)

-Меньше - процессор CSS, оснащенный функциональностью. Использование Less не требует больших усилий с помощью webpack, поскольку менее загружаемый имеет дело с тяжелым подъемом. Вы должны установить меньше, также учитывая, что это зависимость от меньшего загрузчика.
+[Less](http://lesscss.org/) — CSS-препроцессор, оснащенный функциональностью. Испольльзование Less не требует больших усилий с webpack, поскольку загрузчик [less-loader](https://www.npmjs.com/package/less-loader) выполняет всю тяжелую (черновую) работу. Вам нужно установить [less](https://www.npmjs.com/package/less), поскольку от него зависит *less-loader*.


"испоЛЬЛЬзование"

LinchSmyth · 2018-08-23T12:31:48Z

manuscript/styling/02_separating_css.md


-Благодаря этому процессу `MiniCssExtractPlugin` поставляется с накладными расходами во время этапа компиляции. Он пока не работает с горячей перезагрузкой модуля (HMR). Учитывая, что плагин используется только для продакшена, это не проблема.
+Из-за этого процесса `MiniCssExtractPlugin` накладывает дополнительные затраты на этапе компиляции. Он пока не работает с горячей заменой модулей (HMR). Учитывая, что плагин используется только для продакшена, это не проблема.


Я думаю, лучше добавить "Однако" или "НО" перед

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

lex111 · 2018-08-23T14:29:46Z

@LinchSmyth спасибо, поправил и это.

lex111 added 5 commits August 19, 2018 12:37

styling(intro): translation

2e510c8

styling(loading): translation

7b1483e

styling(separating_css): translation

64241cd

styling(eliminating_unused_css): translation

4422c8a

styling(autoprefixing): translation

f47f18f

lex111 requested a review from katienazarova August 20, 2018 18:25

LinchSmyth requested changes Aug 22, 2018

View reviewed changes

lex111 added 2 commits August 22, 2018 16:55

styling: improvements after review

118e5c2

styling: fixes

ec3cd1f

LinchSmyth approved these changes Aug 23, 2018

View reviewed changes

styling: fixes

d8297fd

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Styling #3

Styling #3

lex111 commented Aug 20, 2018

lex111 commented Aug 20, 2018

LinchSmyth left a comment

LinchSmyth Aug 22, 2018

LinchSmyth Aug 22, 2018

LinchSmyth Aug 22, 2018

LinchSmyth Aug 22, 2018

LinchSmyth Aug 22, 2018

LinchSmyth Aug 22, 2018

LinchSmyth Aug 22, 2018

lex111 Aug 22, 2018

LinchSmyth Aug 22, 2018

LinchSmyth Aug 22, 2018

LinchSmyth Aug 22, 2018

lex111 commented Aug 22, 2018

LinchSmyth left a comment

LinchSmyth Aug 23, 2018

LinchSmyth Aug 23, 2018

LinchSmyth Aug 23, 2018

lex111 commented Aug 23, 2018


		In this part, you will learn about styling-related concerns in detail including loading styles, refreshing styles during development, separating CSS, eliminating unused CSS, and autoprefixing.
		В этой части вы подробно узнаете о проблемах, связанных с стилем, включая загрузку стилей, обновление стилей во время разработки, разделение CSS, исключение неиспользуемого CSS и автоматическое добавление браузерных префиксов.


		The matched files can be processed through loaders like [file-loader](https://www.npmjs.com/package/file-loader) or [url-loader](https://www.npmjs.com/package/url-loader), and these possibilities are discussed in the Loading Assets part of the book.
		Соответствующие файлы могут обрабатываться через загрузчики, таких как [file-loader](https://www.npmjs.com/package/file-loader) или [url-loader](https://www.npmjs.com/package/url-loader), и данная возможность обсуждается далее в части Загрузка ресурсов.


		style-loader injects the styling through a `style` element. The way it does this can be customized. It also implements the Hot Module Replacement interface providing for a pleasant development experience.
		style-loader внедряет стилизацию через элемент `style`. То, как он это делает, можно настроить по-своему. Этот загрузчик также реализует интерфейс горячей перезагрузки модулей, обеспечивающий приятный опыт при разработки.


		W> Using PurifyCSS loses CSS source maps even if you have enabled them with loader specific configuration due to the way it works underneath.
		W> Использование PurifyCSS теряет карты кода CSS, даже если вы включили их с определенной конфигурацией загрузчика из-за того, как он работает под ним.


		The idea of [critical path rendering](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/) takes a look at CSS performance from a different angle. Instead of optimizing for size, it optimizes for render order and emphasizes above-the-fold CSS. The result is achieved by rendering the page and then figuring out which rules are required to obtain the shown result.
		Идея [отрисовки критического пути](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/) рассматривает производительность CSS с другой точки зрения. Вместо оптимизации размера, он оптимизирует порядок отрисовки и выделяет CSS в верхней части страницы (above-the-fold). Результат достигается путем отрисовки страницы, а затем выяснения, какие правила необходимы для получения позитивного результата.


		In the next chapter, you'll learn to autoprefix. Enabling the feature makes it more convenient to develop complicated CSS setups that work with older browsers as well.
		В следующей главе вы узнаете autoprefix. Включение возможности упрощает написание вручную сложных настроек CSS, предназначенные для работы со старыми браузерами.


		Благодаря этому процессу `MiniCssExtractPlugin` поставляется с накладными расходами во время этапа компиляции. Он пока не работает с горячей перезагрузкой модуля (HMR). Учитывая, что плагин используется только для продакшена, это не проблема.
		Из-за этого процесса `MiniCssExtractPlugin` накладывает дополнительные затраты на этапе компиляции. Он пока не работает с горячей заменой модулей (HMR). Учитывая, что плагин используется только для продакшена, это не проблема.

Styling #3

Are you sure you want to change the base?

Styling #3

Conversation

lex111 commented Aug 20, 2018

lex111 commented Aug 20, 2018

LinchSmyth left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lex111 commented Aug 22, 2018

LinchSmyth left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lex111 commented Aug 23, 2018