From bc4074bf48eda5b92023523d178c24fed98cab6d Mon Sep 17 00:00:00 2001 From: Leonid Vinogradov Date: Wed, 7 Aug 2024 01:27:24 +0300 Subject: [PATCH] [ru] replace old noteblock syntax with GFM syntax in `learn/tools_and_testing` folder (#22773) [ru] replace old noteblock syntax with GFM syntax in 'learn/tools_and_testing' folder --- .../client-side_javascript_frameworks/index.md | 9 ++++++--- .../react_getting_started/index.md | 9 ++++++--- .../feature_detection/index.md | 18 ++++++++++++------ .../introduction/index.md | 7 ++----- .../ru/learn/tools_and_testing/github/index.md | 9 ++++++--- 5 files changed, 32 insertions(+), 20 deletions(-) diff --git a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/index.md b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/index.md index 5c98c99960d9cc..93cf4c7fe02029 100644 --- a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/index.md +++ b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/index.md @@ -35,7 +35,8 @@ Your code will be richer and more professional as a result, and you'll be able t ## React tutorials -> **Примечание:** React tutorials last tested in May 2020, with React/ReactDOM 16.13.1 and create-react-app 3.4.1. +> [!NOTE] +> React tutorials last tested in May 2020, with React/ReactDOM 16.13.1 and create-react-app 3.4.1. > > If you need to check your code against our version, you can find a finished version of the sample React app code in our [todo-react repository](https://github.com/mdn/todo-react). For a running live version, see . @@ -56,7 +57,8 @@ Your code will be richer and more professional as a result, and you'll be able t ## Ember tutorials -> **Примечание:** Ember tutorials last tested in May 2020, with Ember/Ember CLI version 3.18.0. +> [!NOTE] +> Ember tutorials last tested in May 2020, with Ember/Ember CLI version 3.18.0. > > If you need to check your code against our version, you can find a finished version of the sample Ember app code in the [ember-todomvc-tutorial repository](https://github.com/NullVoxPopuli/ember-todomvc-tutorial/tree/master/steps/00-finished-todomvc/todomvc). For a running live version, see (this also includes a few additional features not covered in the tutorial). @@ -75,7 +77,8 @@ Your code will be richer and more professional as a result, and you'll be able t ## Vue tutorials -> **Примечание:** Vue tutorials last tested in May 2020, with Vue 2.6.11. +> [!NOTE] +> Vue tutorials last tested in May 2020, with Vue 2.6.11. > > If you need to check your code against our version, you can find a finished version of the sample Vue app code in our [todo-vue repository](https://github.com/mdn/todo-vue). For a running live version, see . diff --git a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md index 518fddc1e92dec..6e2582639128e4 100644 --- a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md +++ b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md @@ -49,7 +49,8 @@ const header = ( ); ``` -> **Примечание:** The parentheses in the previous snippet aren't unique to JSX, and don't have any effect on your application. They're a signal to you (and your computer) that the multiple lines of code inside are part of the same expression. You could just as well write the header expression like this: +> [!NOTE] +> The parentheses in the previous snippet aren't unique to JSX, and don't have any effect on your application. They're a signal to you (and your computer) that the multiple lines of code inside are part of the same expression. You could just as well write the header expression like this: > > ```jsx > const header = ( @@ -114,7 +115,8 @@ This creates a `moz-todo-react` directory, and does several things inside it: - Creates a structure of files and directories that define the basic app architecture. - Initializes the directory as a git repository, if you have git installed on your computer. -> **Примечание:** if you have the yarn package manager installed, create-react-app will default to using it instead of npm. If you have both package managers installed and explicitly want to use NPM, you can add the flag `--use-npm` when you run create-react-app: +> [!NOTE] +> If you have the yarn package manager installed, create-react-app will default to using it instead of npm. If you have both package managers installed and explicitly want to use NPM, you can add the flag `--use-npm` when you run create-react-app: > > ```bash > npx create-react-app moz-todo-react --use-npm @@ -293,7 +295,8 @@ Line 7 calls React's `ReactDOM.render()` function with two arguments: All of this tells React that we want to render our React application with the `App` component as the root, or first component. -> **Примечание:** In JSX, React components and HTML elements must have closing slashes. Writing just `` or just `` will cause an error. +> [!NOTE] +> In JSX, React components and HTML elements must have closing slashes. Writing just `` or just `` will cause an error. [Service workers](/ru/docs/Web/API/Service_Worker_API/Using_Service_Workers) are interesting pieces of code that help application performance and allow features of your web applications to work offline, but they're not in scope for this article. You can delete line 5, as well as lines 9 through 12. diff --git a/files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md b/files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md index ec76282b47efe0..616e152cdeb685 100644 --- a/files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md +++ b/files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md @@ -70,11 +70,13 @@ if ("geolocation" in navigator) { Здесь мы берём ссылку на второй элемент `` и создаём элемент `
` как часть нашего теста. В нашем условном выражении мы проверяем, что свойства {{cssxref ("flex")}} и {{cssxref ("flex-flow")}} существуют в браузере. Обратите внимание, что представления JavaScript этих свойств, которые хранятся внутри объекта {{domxref ("HTMLElement.style")}}, используют нижний горбатый регистр, а не дефисы, для разделения слов. -> **Примечание:** Если у вас возникли проблемы с выполнением этого, вы можете сравнить его с нашим кодом [css-feature-detect-finished.html](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/css-feature-detect-finished.html) (см. Также [живую версию](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/feature-detection/css-feature-detect-finished.html)). +> [!NOTE] +> Если у вас возникли проблемы с выполнением этого, вы можете сравнить его с нашим кодом [css-feature-detect-finished.html](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/css-feature-detect-finished.html) (см. Также [живую версию](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/feature-detection/css-feature-detect-finished.html)). Когда вы сохраните все и опробуете свой пример, вы должны увидеть макет flexbox, применённый к странице, если браузер поддерживает современный flexbox, и макет float, если нет. -> **Примечание:** Часто такой подход является излишним из-за незначительной проблемы с обнаружением функций - вы часто можете обойтись без использования префиксов нескольких поставщиков и свойств резервирования, как описано в разделе [Поведение CSS-откат](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#CSS_fallback_behaviour) и [Обработка префиксов CSS](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#Handling_CSS_prefixes). +> [!NOTE] +> Часто такой подход является излишним из-за незначительной проблемы с обнаружением функций - вы часто можете обойтись без использования префиксов нескольких поставщиков и свойств резервирования, как описано в разделе [Поведение CSS-откат](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#CSS_fallback_behaviour) и [Обработка префиксов CSS](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#Handling_CSS_prefixes). #### @supports @@ -122,7 +124,8 @@ if ("geolocation" in navigator) { | _Метод на возвращаемое значение элемента_ | Создайте элемент в памяти, используя {{domxref ("Document.createElement()")}}, а затем проверьте, существует ли метод для него. Если это так, проверьте, какое значение он возвращает. | См. [Dive Into HTML5 Video Formats detection](http://diveinto.html5doctor.com/detect.html#video-formats). | | _Свойство на сохраняемое значение элемента_ | Создайте элемент в памяти, используя {{domxref ("Document.createElement()")}}, установите для свойства определённое значение, затем проверьте, сохраняется ли значение. | См. [Dive into HTML5 `` types detection](http://diveinto.html5doctor.com/detect.html#input-types). | -> **Примечание:** Двойное `NOT` в приведённом выше примере (`!!`) это способ заставить возвращаемое значение стать «правильным» логическим значением, а не {{glossary("Truthy")}}/{{glossary("Falsy")}} значение, которое может исказить результаты. +> [!NOTE] +> Двойное `NOT` в приведённом выше примере (`!!`) это способ заставить возвращаемое значение стать «правильным» логическим значением, а не {{glossary("Truthy")}}/{{glossary("Falsy")}} значение, которое может исказить результаты. Страница [Погружение в HTML5 Обнаружение функций HTML5](http://diveinto.html5doctor.com/detect.html) содержит гораздо больше полезных тестов для обнаружения функций, помимо перечисленных выше, и вы можете найти тест обнаружения функций для большинства вещей, выполнив поиск «обнаружение поддержки для ВАШИ-ФУНКЦИИ-ЗДЕСЬ» в своей любимой поисковой системе. Имейте в виду, однако, что некоторые функции, как известно, не обнаруживаются - см. список Modernizr [Необнаруживаемые](https://github.com/Modernizr/Modernizr/wiki/Undetectables). @@ -200,7 +203,8 @@ blob-constructor cookies cors ...AND LOADS MORE VALUES!> - `flexboxtweener` для промежуточного синтаксиса 2011 года, поддерживаемого IE10. - `flexwrap` для свойства {{cssxref ("flex-wrap")}}, которого нет в некоторых реализациях. -> **Примечание:** вы можете найти список того, что означают все имена классов — см. [Функции, обнаруженные Modernizr](https://modernizr.com/docs#features). +> [!NOTE] +> Вы можете найти список того, что означают все имена классов — см. [Функции, обнаруженные Modernizr](https://modernizr.com/docs#features). Далее, давайте обновим наш CSS, чтобы использовать Modernizr вместо `@supports`. Перейдите в `modernizr-css.css`, и замените два блока `@supports` следующим: @@ -239,9 +243,11 @@ blob-constructor cookies cors ...AND LOADS MORE VALUES!> Так как же это работает? Поскольку все эти имена классов были помещены в элемент `` вы можете настроить таргетинг на браузеры, которые поддерживают или не поддерживают функцию, используя определённые селекторы-потомки. Поэтому здесь мы применяем верхний набор правил только для браузеров, которые поддерживают flexbox, а нижний набор правил - только для браузеров, которые не поддерживают (`no-flexbox`). -> **Примечание:** Имейте в виду, что все тесты функций HTML и JavaScript Modernizr также представлены в этих именах классов, так что вы можете свободно применять CSS выборочно в зависимости от того, поддерживает ли браузер функции HTML или JavaScript, если это необходимо. +> [!NOTE] +> Имейте в виду, что все тесты функций HTML и JavaScript Modernizr также представлены в этих именах классов, так что вы можете свободно применять CSS выборочно в зависимости от того, поддерживает ли браузер функции HTML или JavaScript, если это необходимо. -> **Примечание:** Если у вас возникли проблемы с выполнением этого, проверьте ваш код по файлам [`modernizr-css.html`](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/modernizr-css.html) и [`modernizr-css.css`](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/modernizr-css.css) (см. Также этот запуск в реальном времени). +> [!NOTE] +> Если у вас возникли проблемы с выполнением этого, проверьте ваш код по файлам [`modernizr-css.html`](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/modernizr-css.html) и [`modernizr-css.css`](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/modernizr-css.css) (см. Также этот запуск в реальном времени). ### JavaScript diff --git a/files/ru/learn/tools_and_testing/cross_browser_testing/introduction/index.md b/files/ru/learn/tools_and_testing/cross_browser_testing/introduction/index.md index 2a1f6724e04032..1fbca937906590 100644 --- a/files/ru/learn/tools_and_testing/cross_browser_testing/introduction/index.md +++ b/files/ru/learn/tools_and_testing/cross_browser_testing/introduction/index.md @@ -21,16 +21,12 @@ slug: Learn/Tools_and_testing/Cross_browser_testing/Introduction Поймите, что вы - не ваши пользователи — если ваш сайт работает на Macbook Pro или Galaxy Nexus, это не значит, что он будет работать так для всех пользователей — нужно сделать много тестов! -> **Примечание:** Статья [сделаем веб доступным для всех](https://hacks.mozilla.org/2016/07/make-the-web-work-for-everyone/) предоставляет более полезную информацию о различных браузерах, которые используют люди, их доле рынка и связанных с этим проблемах совместимости браузеров. - Мы должны поговорить немного о терминологии. Для начала, когда мы говорим о сайтах, "работающих кросс-браузерной", на самом деле мы говорим о том, что они должны обеспечивать приемлемое удобство использования в разных браузерах. Это нормально, если сайт выглядит немного по-разному в разных браузерах, главное он должен обеспечивать полную функциональность.В современных браузерах вы можете сделать что-то анимированным или использовать 3D, тогда как в старых браузерах вы можете лишь показать плоскую картинку, предоставляющую ту же информацию. Если владелец сайта доволен, вы сделали своё дело. С другой стороны, плохо, когда сайт полноценно работает для обычных людей, но может быть совершенно недоступен для людей, имеющих проблемы со зрением, т.к. их приложения для чтения экрана не могут распознать информацию на сайте. Когда мы говорим "приемлемое количество браузеров", мы не говорим, что это должно быть 100% всех браузеров в мире — это почти невозможно. Вы можете собрать информацию о том, какими браузеры и устройства используют ваши пользователи (это мы обсудим во второй статье — см. [Gotta test 'em all?](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#Gotta_test_%27em_all)), но это ничего не гарантирует. Как веб-разработчик, вы должны определить для себя несколько браузеров и устройств, на которых код должен работать полностью, но кроме этого, вы должны писать код так, чтобы и другие браузеры были способны максимально использовать ваш сайт (defensive coding). Это одна из самых больших проблем веб-разработки. -> **Примечание:** Мы разберём defensive coding позже в этом модуле. - ## Почему возникают кросс-браузерные проблемы? Есть множество причин, почему возникают кросс-браузерные проблемы, и, заметьте, что сейчас мы говорим о проблемах, при которых некоторые вещи ведут себя по-разному в разных браузерах / устройствах / настройках просмотра. Прежде чем вы столкнётесь с проблемами браузера, вы должны исправить все ошибки в коде (см. [Отладка HTML](/ru/docs/Learn/HTML/Введение_в_HTML/Debugging_HTML), [Отладка CSS](/ru/docs/Learn/CSS/Introduction_to_CSS/Отладка_CSS), and [Что пошло не так? Устранение ошибок JavaScript](/ru/docs/Learn/JavaScript/Первые_шаги/Что_пошло_не_так) из предыдущего раздела). @@ -69,7 +65,8 @@ Now you know your target testing platforms, you should go back and review the re You should compile a list of the potential problem areas. -> **Примечание:** You can find browser support information for technologies by looking up the different features on MDN — the site you're on! You should also consult [caniuse.com](http://caniuse.com/), for some further useful details. +> [!NOTE] +> You can find browser support information for technologies by looking up the different features on MDN — the site you're on! You should also consult [caniuse.com](http://caniuse.com/), for some further useful details. Once you've agreed on these details, you can go ahead and start developing the site. diff --git a/files/ru/learn/tools_and_testing/github/index.md b/files/ru/learn/tools_and_testing/github/index.md index 20ce9b224afea4..4eea80405c74c9 100644 --- a/files/ru/learn/tools_and_testing/github/index.md +++ b/files/ru/learn/tools_and_testing/github/index.md @@ -20,7 +20,8 @@ slug: Learn/Tools_and_testing/GitHub СКВ обеспечивают инструменты для решения всех вышеуказанных задач. [Git](https://git-scm.com/) является примером СКВ, а [GitHub](https://github.com/) - это сайт, обеспечивающий веб-интерфейс для работы с гит, а также множество полезных инструментов для работы с гит-репозиториями лично или в командах, такие как фиксация проблем с кодом, инструменты для проверки кода, инструменты для управления созданием продукта, например назначение задач и их статусов, и т.д. -> **Примечание:** ГИТ на самом деле - распределённая система контроля версий, это значит что полная копия репозитория, содержащая всю кодовую базу сохраняется на твой компьютер (и кого-либо ещё). Ты вносишь изменения в свою копию и затем отправляешь эти изменения обратно на сервер, на котором администратор решит соединять ли твои изменения с оригиналом. +> [!NOTE] +> Git — это _распределённая_ система контроля версий, это значит что полная копия репозитория, содержащая всю кодовую базу сохраняется на ваш компьютер (и кого-либо ещё). После внесения изменений в свою копию их надо отправить обратно на сервер, и после администратор сервера решит соединять ли эти изменения с оригиналом. ## Подготовка @@ -34,7 +35,8 @@ slug: Learn/Tools_and_testing/GitHub Также желательно, чтобы у вас были некоторые базовые знания о терминале, например, перемещение между каталогами, создание файлов и изменение системного `PATH`. -> **Примечание:** Github не единственный сайт / инструментарий который ты можешь использовать с Git. Есть и альтернативы, такие как [GitLab](https://about.gitlab.com/), которые ты можешь попробовать, а также ты можешь попробовать настроить свой собственный сервер Git и использовать вместо GitHub. Мы в этом курсе остановились на GitHub, чтобы показать один из рабочих способов. +> [!NOTE] +> Github не единственный сайт/инструментарий который можно использовать с Git. Есть и альтернативы, такие как [GitLab](https://about.gitlab.com/), а также можно настроить свой собственный сервер Git и использовать его вместо GitHub. Мы в этом курсе остановились на GitHub, чтобы показать один из рабочих способов. ## Руководства @@ -51,7 +53,8 @@ slug: Learn/Tools_and_testing/GitHub - [Mastering issues (from GitHub)](https://guides.github.com/features/issues/) - : На вкладке с обсуждением проблем (issue) пользователи могут задавать вопросы и сообщать об ошибках, а вы можете курировать работу над обновлениями кода: назначать ответственных за исправление возникших проблем, отвечать на вопросы пользователей, сообщать об исправлении ошибок. Эта статья поможет вам разобраться со всем, что касается работы над проблемами. -> **Примечание:** На самом деле вы можете делать при помощи Git и GitHub **намного больше** , но мы считаем, что эти руководства необходимый минимум для начала его эффективного использования. По мере погружения в Git и использования более сложных команд к вам придёт понимание, что очень легко сделать что-то неправильно. Не беспокойтесь, даже профессиональные разработчики иногда испытывают трудности с Git и ищут решения в Интернете. Например, на сайте [Flight rules for Git](https://github.com/k88hudson/git-flight-rules) или [Dangit, git!](https://dangitgit.com/) +> [!NOTE] +> На самом деле при помощи Git и GitHub можно делать **намного больше**, но мы считаем, что эти руководства необходимый минимум для начала его эффективного использования. По мере погружения в Git и использования более сложных команд к вам придёт понимание, что очень легко сделать что-то неправильно. Не беспокойтесь, даже профессиональные разработчики иногда испытывают трудности с Git и ищут решения в Интернете. Например, на сайте [Flight rules for Git](https://github.com/k88hudson/git-flight-rules) или [Dangit, git!](https://dangitgit.com/) ## Материалы для изучения