From 4ddbbb2a317b8a1a5d5778f091ba2005cf542096 Mon Sep 17 00:00:00 2001 From: ifyour Date: Thu, 19 Jul 2018 00:55:33 +0800 Subject: [PATCH 01/15] translation 2/10 --- .../managing-packages-with-npm.json | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/05-apis-and-microservices/managing-packages-with-npm.json b/05-apis-and-microservices/managing-packages-with-npm.json index 05d6f0f..f9f705d 100644 --- a/05-apis-and-microservices/managing-packages-with-npm.json +++ b/05-apis-and-microservices/managing-packages-with-npm.json @@ -8,20 +8,20 @@ "id": "587d7fb3367417b2b2512bfb", "title": "How to Use package.json, the Core of Any Node.js Project or npm Package", "description": [ - "The file package.json is the center of any Node.js project or npm package. It stores information about your project just like the -section in a HTML document describes the content of a webpage. The package.json consists of a single JSON-object where information is stored in \"key\": value-pairs. There are only two required fields in a minimal package.json - name and version - but it’s a good practice to provide additional information about your project that could be useful to future users or maintainers.", - "The author-field", - "If you go to the Glitch project that you set up previously and look at on the left side of your screen, you’ll find the file tree where you can see an overview of the various files in your project. Under the file tree’s back-end section, you’ll find package.json - the file that we’ll be improving in the next couple of challenges.", - "One of the most common pieces of information in this file is the author-field that specifies who’s the creator of a project. It can either be a string or an object with contact details. The object is recommended for bigger projects but in our case, a simple string like the following example will do.", + "package.json 是任何 Node.js 项目或 NPM 包的中心。它存储项目的相关信息，就像 HTML 文档中的 -section 描述网页内容一样。 package.json 由单个 JSON 对象组成，它以键值对的形式存储项目的信息。 一个最小的 package.json 文件至少包含两个必须字段：name 和 version -- 但是提供有关项目的附加信息是一个更好的做法，在以后它可能对你的用户或者维护者有所帮助。", + "author 字段", + "如果你转到之前设置的 Glitch 项目并查看屏幕左侧，你会找到看到一个文件树，你可以在其中查看项目中各种文件的概述。 在文件树的末尾部分，你会看到 package.json - 我们将在接下来的几个挑战中改进这个文件。", + "这个文件中最常见的信息之一是作者字段，它指定了谁是项目的创建者。它可以是字符串，也可以是带有联系人详细信息的对象。对于较大的项目，建议使用对象，但是在我们的例子中，一个简单的字符串就可以了，比如下面的例子。", "\"author\": \"Jane Doe\",", - "Instructions", - "Add your name to the author-field in the package.json of your Glitch project.", - "Remember that you’re writing JSON.", - "All field-names must use double-quotes (\"), e.g. \"author\"", - "All fields must be separated with a comma (,)" + "说明", + "将你的名字添加到 Glitch 项目的 package.json 中的 author 字段中。", + "请记住，你正在编写 JSON 文件。", + "所有的字段名必须使用双引号（\"）包裹, 比如：\"author\"", + "所有字段必须用逗号（,）分隔" ], "tests": [ { - "text": "package.json should have a valid \"author\" key", + "text": "package.json 应该有一个有效的 \"author\" 键", "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.author, '\"author\" is missing'); }, xhr => { throw new Error(xhr.responseText); })" } ], @@ -33,17 +33,17 @@ "id": "587d7fb3367417b2b2512bfc", "title": "Add a Description to Your package.json", "description": [ - "The next part of a good package.json is the description-field, where a short but informative description about your project belongs.", - "If you some day plan to publishing a package to npm, remember that this is the string that should sell your idea to the user when they decide whether to install your package or not. However, that’s not the only use case for the description: Since it’s a great way to summarize what a project does, it’s just as important for your normal Node.js-projects to help other developers, future maintainers or even your future self understand the project quickly.", - "Regardless of what you plan for your project, a description is definitely recommended. Let’s add something similar to this:", + "一个好的 package.json 文件的下一部分就是 description 字段, 通过简洁的信息来描述你的项目。", + "如果你计划将来把这个包发布到 NPM, 请记住这是描述信息，当用户决定是否安装你的包时，应该将这个项目的想法告诉他们。 然而，这并不是描述信息的唯一使用场景: 它也是总结项目的一种很好的方式, 对于一个普通的 Node.js 项目来说，帮助其它开发者甚至是你自己快速的理解项目这非常重要。", + "无论你如何计划项目，都建议你使用描述信息。 我们来添加类似这样的信息:", "\"description\": \"A project that does something awesome\",", - "Instructions", - "Add a description to the package.json in your Glitch project.", - "Remember to use double-quotes for field-names (\") and commas (,) to separate fields." + "说明", + "在 Glitch 项目的 package.json 中添加描述。", + "请记住使用 （\"）包裹字段名并且使用（,）分隔字段" ], "tests": [ { - "text": "package.json should have a valid \"description\" key", + "text": "package.json 应该有一个有效的 \"description\" 键", "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.description, '\"description\" is missing'); }, xhr => { throw new Error(xhr.responseText); })" } ], From f700e6909ce1916409a9514bb7518e917664ffbc Mon Sep 17 00:00:00 2001 From: ifyour Date: Thu, 19 Jul 2018 23:00:35 +0800 Subject: [PATCH 02/15] translation 4/10 --- .../managing-packages-with-npm.json | 56 +++++++++---------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/05-apis-and-microservices/managing-packages-with-npm.json b/05-apis-and-microservices/managing-packages-with-npm.json index f9f705d..8d75ee8 100644 --- a/05-apis-and-microservices/managing-packages-with-npm.json +++ b/05-apis-and-microservices/managing-packages-with-npm.json @@ -55,25 +55,25 @@ "id": "587d7fb4367417b2b2512bfd", "title": "Add Keywords to Your package.json", "description": [ - "The keywords-field is where you can describe your project using related keywords.", - "Example", + "你可以在 keywords 字段中使用相关的关键字描述项目。", + "例子", "\"keywords\": [ \"descriptive\", \"related\", \"words\" ],", - "As you can see, this field is structured as an array of double-quoted strings.", - "Instructions", - "Add an array of suitable strings to the keywords-field in the package.json of your Glitch project.", - "One of the keywords should be freecodecamp." + "正如你所见，这个字段的结构是一个包含双引号字符串的数组。", + "说明", + "在 Glitch 项目的 package.json 中，给 keywords 添加适当的字符串数组。", + "关键词之一应该是 freecodecamp。" ], "tests": [ { - "text": "package.json should have a valid \"keywords\" key", + "text": "package.json 应该有一个有效的 \"keywords\" 键", "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.keywords, '\"keywords\" is missing'); }, xhr => { throw new Error(xhr.responseText); })" }, { - "text": "\"keywords\" field should be an Array", + "text": "\"keywords\" 应该是一个数组", "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.isArray(packJson.keywords, '\"keywords\" is not an array'); }, xhr => { throw new Error(xhr.responseText); })" }, { - "text": "\"keywords\" should include \"freecodecamp\"", + "text": "\"keywords\" 中应该包含关键词 \"freecodecamp\"", "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.include(packJson.keywords, 'freecodecamp', '\"keywords\" does not include \"freecodecamp\"'); }, xhr => { throw new Error(xhr.responseText); })" } ], @@ -85,17 +85,17 @@ "id": "587d7fb4367417b2b2512bfe", "title": "Add a License to Your package.json", "description": [ - "The license-field is where you inform users of your project what they are allowed to do with it.", - "Some common licenses for open source projects include MIT and BSD. http://choosealicense.com is a great resource if you want to learn more about what license could fit your project.", - "License information is not required. Copyright laws in most countries will give you ownership of what you create by default. However, it’s always a good practice to explicitly state what users can and can’t do.", - "Example", + "license 字段是你告知用户你的项目允许用在什么地方。", + "开源项目的一些常用许可证包括 MIT 和 BSD。如果你想了解更多适合你项目的许可证的信息，那么 http://choosealicense.com 是一个不错的网站。", + "许可证信息并不是必须的。大多数国家的版权法会默认让你拥有自己创作的作品的所有权。 但是，明确说明用户可以做什么和不能做什么始终是一个很好的做法。", + "例子", "\"license\": \"MIT\",", - "Instructions", - "Fill the license-field in the package.json of your Glitch project as you find suitable." + "说明", + "在 Glitch 项目的 package.json 中填写合适的 license 字段。" ], "tests": [ { - "text": "package.json should have a valid \"license\" key", + "text": "package.json 应该有一个有效的 \"license\" 键", "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.license, '\"license\" is missing'); }, xhr => { throw new Error(xhr.responseText); })" } ], @@ -107,15 +107,15 @@ "id": "587d7fb4367417b2b2512bff", "title": "Add a Version to Your package.json", "description": [ - "The version is together with name one of the required fields in a package.json. This field describes the current version of your project.", - "Example", + "在 package.json 中 version 和 name 是所必填的字段之一。version 字段描述了当前项目的版本。", + "例子", "\"version\": \"1.2\",", - "Instructions", - "Add a version to the package.json in your Glitch project." + "说明", + "在 Glitch 项目中的 package.json 中添加一个版本号。" ], "tests": [ { - "text": "package.json should have a valid \"version\" key", + "text": "package.json 应该包含一个有效的 \"version\" 键", "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.version, '\"version\" is missing'); }, xhr => { throw new Error(xhr.responseText); })" } ], @@ -127,23 +127,23 @@ "id": "587d7fb4367417b2b2512c00", "title": "Expand Your Project with External Packages from npm", "description": [ - "One of the biggest reasons to use a package manager is their powerful dependency management. Instead of manually having to make sure that you get all dependencies whenever you set up a project on a new computer, npm automatically installs everything for you. But how can npm know exactly what your project needs? Meet the dependencies-section of your package.json.", - "In the dependencies-section, packages your project require are stored using the following format:", + "使用包管理器的最大原因之一是它们强大的依赖管理特性。在新的计算机上开始一个项目时，不用手动确认你已安装所有的依赖，npm 会自动为你安装它们。但是 npm 如何准确的知道你项目需要哪些依赖呢？ 我们来看看 package.json 中 dependencies 这一部分。", + "在 dependencies 这一部分, 你的项目需要按照下面这种格式来存储这些依赖包：", "\"dependencies\": {", " \"package-name\": \"version\",", " \"express\": \"4.14.0\"", "}", - "Instructions", - "Add version 2.14.0 of the package moment to the dependencies-field of your package.json", - "Moment is a handy library for working with time and dates." + "说明", + "在 package.json 的 dependencies 字段中添加一个版本号为 2.14.0 的 moment 包", + "Moment 是一个非常方便的库，它用来处理时间和日期。" ], "tests": [ { - "text": "\"dependencies\" should include \"moment\"", + "text": "\"dependencies\" 应该包含 \"moment\"", "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'moment', '\"dependencies\" does not include \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })" }, { - "text": "\"moment\" version should be \"2.14.0\"", + "text": "\"moment\" 的版本应该是 \"2.14.0\"", "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.match(packJson.dependencies.moment, /^[\\^\\~]?2\\.14\\.0/, 'Wrong version of \"moment\" installed. It should be 2.14.0'); }, xhr => { throw new Error(xhr.responseText); })" } ], From 8a8718403c4de77221e0b805491ff34945f60092 Mon Sep 17 00:00:00 2001 From: ifyour Date: Fri, 20 Jul 2018 23:12:43 +0800 Subject: [PATCH 03/15] translate assert & revise --- .../managing-packages-with-npm.json | 44 +++++++++---------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/05-apis-and-microservices/managing-packages-with-npm.json b/05-apis-and-microservices/managing-packages-with-npm.json index 8d75ee8..c7a6234 100644 --- a/05-apis-and-microservices/managing-packages-with-npm.json +++ b/05-apis-and-microservices/managing-packages-with-npm.json @@ -8,13 +8,13 @@ "id": "587d7fb3367417b2b2512bfb", "title": "How to Use package.json, the Core of Any Node.js Project or npm Package", "description": [ - "package.json 是任何 Node.js 项目或 NPM 包的中心。它存储项目的相关信息，就像 HTML 文档中的 -section 描述网页内容一样。 package.json 由单个 JSON 对象组成，它以键值对的形式存储项目的信息。 一个最小的 package.json 文件至少包含两个必须字段：name 和 version -- 但是提供有关项目的附加信息是一个更好的做法，在以后它可能对你的用户或者维护者有所帮助。", + "package.json 是任何 Node.js 项目或 npm 包的中心。它存储项目的相关信息，就像 HTML 文档中的 区域是用来描述网页的通用信息（元信息）一样。package.json 由单个 JSON 对象组成，它以键值对的形式存储项目的信息。一个最小的 package.json 文件至少包含两个必须字段：name 和 version —— 但是提供有关项目的附加信息是一个更好的做法，在以后它可能对你的用户或者维护者有所帮助。", "author 字段", - "如果你转到之前设置的 Glitch 项目并查看屏幕左侧，你会找到看到一个文件树，你可以在其中查看项目中各种文件的概述。 在文件树的末尾部分，你会看到 package.json - 我们将在接下来的几个挑战中改进这个文件。", - "这个文件中最常见的信息之一是作者字段，它指定了谁是项目的创建者。它可以是字符串，也可以是带有联系人详细信息的对象。对于较大的项目，建议使用对象，但是在我们的例子中，一个简单的字符串就可以了，比如下面的例子。", + "如果你转到之前设置的 Glitch 项目并查看屏幕左侧，你会看到一个文件树，你可以在其中查看项目中各种文件的概述。在文件树的末尾部分，你会看到 package.json —— 我们将在接下来的几个挑战中改进这个文件。", + "这个文件中最常见的信息之一是 author 字段，它指定了谁是项目的创建者。它可以是字符串，也可以是带有联系人详细信息的对象。对于较大的项目，建议使用对象，但是在我们的例子中，一个简单的字符串就可以了，比如下面的例子。", "\"author\": \"Jane Doe\",", "说明", - "将你的名字添加到 Glitch 项目的 package.json 中的 author 字段中。", + "将你的名字添加到 Glitch 项目中，package.json 的 author 字段。", "请记住，你正在编写 JSON 文件。", "所有的字段名必须使用双引号（\"）包裹, 比如：\"author\"", "所有字段必须用逗号（,）分隔" @@ -22,7 +22,7 @@ "tests": [ { "text": "package.json 应该有一个有效的 \"author\" 键", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.author, '\"author\" is missing'); }, xhr => { throw new Error(xhr.responseText); })" + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.author, '缺少 \"author\"'); }, xhr => { throw new Error(xhr.responseText); })" } ], "solutions": [], @@ -33,9 +33,9 @@ "id": "587d7fb3367417b2b2512bfc", "title": "Add a Description to Your package.json", "description": [ - "一个好的 package.json 文件的下一部分就是 description 字段, 通过简洁的信息来描述你的项目。", - "如果你计划将来把这个包发布到 NPM, 请记住这是描述信息，当用户决定是否安装你的包时，应该将这个项目的想法告诉他们。 然而，这并不是描述信息的唯一使用场景: 它也是总结项目的一种很好的方式, 对于一个普通的 Node.js 项目来说，帮助其它开发者甚至是你自己快速的理解项目这非常重要。", - "无论你如何计划项目，都建议你使用描述信息。 我们来添加类似这样的信息:", + "一个好的 package.json 文件的下一部分就是 description 字段, 通过简洁的文字来描述你的项目。", + "如果你计划将来把这个包发布到 npm, 请注意 description 字段的作用是告知用户这个包的用途，这样用户就可以决定是否要安装你发布的包。然而，这并不是描述信息的唯一使用场景：它也是一种很好的总结项目的方式，对于一个普通的 Node.js 项目来说，它可以帮助其它开发者、未来的维护者以及你自己快速地了解项目，这同样非常重要。", + "无论你如何计划项目，都建议你使用描述信息。我们来添加类似这样的信息：", "\"description\": \"A project that does something awesome\",", "说明", "在 Glitch 项目的 package.json 中添加描述。", @@ -44,7 +44,7 @@ "tests": [ { "text": "package.json 应该有一个有效的 \"description\" 键", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.description, '\"description\" is missing'); }, xhr => { throw new Error(xhr.responseText); })" + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.description, '缺少 \"description\"'); }, xhr => { throw new Error(xhr.responseText); })" } ], "solutions": [], @@ -58,7 +58,7 @@ "你可以在 keywords 字段中使用相关的关键字描述项目。", "例子", "\"keywords\": [ \"descriptive\", \"related\", \"words\" ],", - "正如你所见，这个字段的结构是一个包含双引号字符串的数组。", + "正如你所见，这个字段的结构是一个由双引号字符串组成的数组。", "说明", "在 Glitch 项目的 package.json 中，给 keywords 添加适当的字符串数组。", "关键词之一应该是 freecodecamp。" @@ -66,15 +66,15 @@ "tests": [ { "text": "package.json 应该有一个有效的 \"keywords\" 键", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.keywords, '\"keywords\" is missing'); }, xhr => { throw new Error(xhr.responseText); })" + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.keywords, '缺少 \"keywords\"'); }, xhr => { throw new Error(xhr.responseText); })" }, { "text": "\"keywords\" 应该是一个数组", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.isArray(packJson.keywords, '\"keywords\" is not an array'); }, xhr => { throw new Error(xhr.responseText); })" + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.isArray(packJson.keywords, '\"keywords\" 不是一个数组'); }, xhr => { throw new Error(xhr.responseText); })" }, { "text": "\"keywords\" 中应该包含关键词 \"freecodecamp\"", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.include(packJson.keywords, 'freecodecamp', '\"keywords\" does not include \"freecodecamp\"'); }, xhr => { throw new Error(xhr.responseText); })" + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.include(packJson.keywords, 'freecodecamp', '\"keywords\" 未包含 \"freecodecamp\"'); }, xhr => { throw new Error(xhr.responseText); })" } ], "solutions": [], @@ -85,9 +85,9 @@ "id": "587d7fb4367417b2b2512bfe", "title": "Add a License to Your package.json", "description": [ - "license 字段是你告知用户你的项目允许用在什么地方。", - "开源项目的一些常用许可证包括 MIT 和 BSD。如果你想了解更多适合你项目的许可证的信息，那么 http://choosealicense.com 是一个不错的网站。", - "许可证信息并不是必须的。大多数国家的版权法会默认让你拥有自己创作的作品的所有权。 但是，明确说明用户可以做什么和不能做什么始终是一个很好的做法。", + "license 字段是你告知用户允许他们拿这个项目干什么的地方。", + "常见的开源协议是 MIT 和 BSD。如果你想了解更多适合你项目的许可证的信息，那么 http://choosealicense.com 是一个不错的网站。", + "许可证信息并不是必须的。大多数国家的版权法会默认让你拥有自己创作的作品的所有权。但是，明确说明用户可以做什么和不能做什么会是一个很好的做法。", "例子", "\"license\": \"MIT\",", "说明", @@ -96,7 +96,7 @@ "tests": [ { "text": "package.json 应该有一个有效的 \"license\" 键", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.license, '\"license\" is missing'); }, xhr => { throw new Error(xhr.responseText); })" + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.license, '缺少 \"license\"'); }, xhr => { throw new Error(xhr.responseText); })" } ], "solutions": [], @@ -116,7 +116,7 @@ "tests": [ { "text": "package.json 应该包含一个有效的 \"version\" 键", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.version, '\"version\" is missing'); }, xhr => { throw new Error(xhr.responseText); })" + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.version, '缺少 \"version\"'); }, xhr => { throw new Error(xhr.responseText); })" } ], "solutions": [], @@ -127,8 +127,8 @@ "id": "587d7fb4367417b2b2512c00", "title": "Expand Your Project with External Packages from npm", "description": [ - "使用包管理器的最大原因之一是它们强大的依赖管理特性。在新的计算机上开始一个项目时，不用手动确认你已安装所有的依赖，npm 会自动为你安装它们。但是 npm 如何准确的知道你项目需要哪些依赖呢？ 我们来看看 package.json 中 dependencies 这一部分。", - "在 dependencies 这一部分, 你的项目需要按照下面这种格式来存储这些依赖包：", + "使用包管理器的最大原因之一是它们强大的依赖管理特性。在新的计算机上开始一个项目时，不用手动确认你已安装所有的依赖，npm 会自动为你安装它们。但是 npm 如何准确的知道你项目需要哪些依赖呢？我们来看看 package.json 中 dependencies 这一部分。", + "在 dependencies 这一部分，你的项目需要按照下面这种格式来存储这些依赖包：", "\"dependencies\": {", " \"package-name\": \"version\",", " \"express\": \"4.14.0\"", @@ -140,11 +140,11 @@ "tests": [ { "text": "\"dependencies\" 应该包含 \"moment\"", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'moment', '\"dependencies\" does not include \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })" + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'moment', '\"dependencies\" 未包含 \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })" }, { "text": "\"moment\" 的版本应该是 \"2.14.0\"", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.match(packJson.dependencies.moment, /^[\\^\\~]?2\\.14\\.0/, 'Wrong version of \"moment\" installed. It should be 2.14.0'); }, xhr => { throw new Error(xhr.responseText); })" + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.match(packJson.dependencies.moment, /^[\\^\\~]?2\\.14\\.0/, '安装的 \"moment\" 版本有误。它应该是 2.14.0'); }, xhr => { throw new Error(xhr.responseText); })" } ], "solutions": [], From 1e36c046968804d83ba83a11eb70cd0c945a2738 Mon Sep 17 00:00:00 2001 From: ifyour Date: Sat, 21 Jul 2018 17:49:41 +0800 Subject: [PATCH 04/15] translation 2/10 --- .../managing-packages-with-npm.json | 58 +++++++++---------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/05-apis-and-microservices/managing-packages-with-npm.json b/05-apis-and-microservices/managing-packages-with-npm.json index c7a6234..f96f29e 100644 --- a/05-apis-and-microservices/managing-packages-with-npm.json +++ b/05-apis-and-microservices/managing-packages-with-npm.json @@ -155,29 +155,29 @@ "id": "587d7fb5367417b2b2512c01", "title": "Manage npm Dependencies By Understanding Semantic Versioning", "description": [ - "Versions of the npm packages in the dependencies-section of your package.json follow what’s called Semantic Versioning (SemVer), an industry standard for software versioning aiming to make it easier to manage dependencies. Libraries, frameworks or other tools published on npm should use SemVer in order to clearly communicate what kind of changes that projects who depend on the package can expect if they update.", - "SemVer doesn’t make sense in projects without public APIs - so unless your project is similar to the examples above, use another versioning format.", - "So why do you need to understand SemVer?", - "Knowing SemVer can be useful when you develop software that use external dependencies (which you almost always do). One day, your understanding of these numbers will save you from accidentally introducing breaking changes to your project without understanding why things “that worked yesterday” suddenly doesn’t.", - "This is how Semantic Versioning works according to the official website:", - "Given a version number MAJOR.MINOR.PATCH, increment the:", - "MAJOR version when you make incompatible API changes,", - "MINOR version when you add functionality in a backwards-compatible manner, and", - "PATCH version when you make backwards-compatible bug fixes.", - "This means that PATCHes are bug fixes and MINORs add new features but neither of them break what worked before. Finally, MAJORs add changes that won’t work with earlier versions.", - "Example", - "A semantic version number: 1.3.8", - "Instructions", - "In the dependencies-section of your package.json, change the version of moment to match MAJOR version 2, MINOR version 10 and PATCH version 2" + "在 package.json 中，dependencies 这部分的 npm 包的版本号遵循所谓的语义化版本（SemVer），它是一种软件版本控制的行业标准，旨在使管理依赖项更加容易。在 npm 上发布的库、框架或其它工具都应该使用语义化版本（SemVer），以便可以清楚的告知用户，项目的依赖包在更新时可以预期的变化。", + "在没有公共 API 的项目中，语义化版本（SemVer）没有意义 —— 除非你的项目与上面的例子类似，否则请使用其它的版本控制格式吧。", + "为什么你需要了解语义化版本（SemVer）？", + "在开发使用外部依赖项的软件（大多数情况都是这样）时，了解语义化版本（SemVer）会很有用。有一天你会明白这些数字的含义，在项目中它可以避免你意外地引入一些重大更改，同时也能避免“昨天还是好好的”今天就不工作了这种情况发生。", + "根据语义化版本（SemVer）官方网站，它是这样规定的：", + "版本格式：主版本号.次版本号.修订号，版本号递增规则如下：", + "主版本号：当你做了不兼容的 API 修改，", + "次版本号：当你做了向下兼容的功能性新增，", + "修订号：当你做了向下兼容的问题修正。", + "这意味着修订号是用来修复错误的，次版本号则是添加了新功能，但它们都没有破坏之前的功能。最后，主版本号的变更则是添加了对早期版本不兼容的更改。", + "例子", + "一个语义化的版本号：1.3.8", + "说明", + "在 package.json 中，修改 dependencies 里的 moment 的版本号，让它的主版本是 2，次版本号是 10，修订号是 2。" ], "tests": [ { - "text": "\"dependencies\" should include \"moment\"", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'moment', '\"dependencies\" does not include \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })" + "text": "\"dependencies\" 应该包含 \"moment\"", + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'moment', '\"dependencies\" 未包含 \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })" }, { - "text": "\"moment\" version should be \"2.10.2\"", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.match(packJson.dependencies.moment, /^[\\^\\~]?2\\.10\\.2/, 'Wrong version of \"moment\". It should be 2.10.2'); }, xhr => { throw new Error(xhr.responseText); })" + "text": "\"moment\" 的版本号应该是 \"2.10.2\"", + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.match(packJson.dependencies.moment, /^[\\^\\~]?2\\.10\\.2/, '\"moment\" 的版本号有误。它应该是 2.10.2'); }, xhr => { throw new Error(xhr.responseText); })" } ], "solutions": [], @@ -188,22 +188,22 @@ "id": "587d7fb5367417b2b2512c02", "title": "Use the Tilde-Character to Always Use the Latest Patch Version of a Dependency", "description": [ - "In the last challenge, we told npm to only include a specific version of a package. That’s a useful way to freeze your dependencies if you need to make sure that different parts of your project stay compatible with each other. But in most use cases you don’t want to miss bug fixes, since they often include important security patches and (hopefully) don’t break things in doing so.", - "To allow a npm dependency to get updated to the latest PATCH-version, you can prefix the dependency’s version with the tilde-character (~). In package.json, our current rule for how npm may upgrade moment is to use a specific version only (2.10.2), but we want to allow the latest 2.10.x-version.", - "Example", - "\"some-package-name\": \"~1.3.8\" allows updates to any 1.3.x version.", - "Instructions", - "Use the tilde-character (~) to prefix the version of moment in your dependencies and allow npm to update it to any new PATCH release.", - "Note that the version numbers themselves not should be changed." + "在最后一个挑战中，我们告诉 npm 只包含特定版本的依赖包。如果想让项目各个部分保持相互兼容，冻结依赖是一个有效的办法。但是大多数情况下，我们并不希望错过依赖项的问题修复，因为它们通常包含重要的安全补丁，并且希望这样可以持续正常的工作。", + "为了让 npm 依赖项更新到最新的修订版，你可以在依赖包的版本号前加一个波浪号（~）。在 package.json 中，我们当前的 moment 依赖包更新规则是：仅使用特定版本（2.10.2），但我们想用它最新的 2.10.x 版本。", + "例子", + "\"some-package-name\": \"~1.3.8\" 可以更新到任何 1.3.x 版本。", + "说明", + "在 dependencies 中，给 moment 的版本号添加波浪号（~）前缀，允许 npm 将其更新为最新的修订版。", + "请注意，原本的版本号不用更改。" ], "tests": [ { - "text": "\"dependencies\" should include \"moment\"", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'moment', '\"dependencies\" does not include \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })" + "text": "\"dependencies\" 应该包含 \"moment\"", + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'moment', '\"dependencies\" 未包含 \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })" }, { - "text": "\"moment\" version should match \"~2.10.2\"", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.match(packJson.dependencies.moment, /^\\~2\\.10\\.2/, 'Wrong version of \"moment\". It should be ~2.10.2'); }, xhr => { throw new Error(xhr.responseText); })" + "text": "\"moment\" 的版本号应该是 \"~2.10.2\"", + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.match(packJson.dependencies.moment, /^\\~2\\.10\\.2/, '\"moment\" 版本号有误，它应该是 ~2.10.2'); }, xhr => { throw new Error(xhr.responseText); })" } ], "solutions": [], From 7e997918eba7b94792ea9c710384fe1dc31fdc4a Mon Sep 17 00:00:00 2001 From: ifyour Date: Sun, 22 Jul 2018 10:31:12 +0800 Subject: [PATCH 05/15] revise --- .../managing-packages-with-npm.json | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/05-apis-and-microservices/managing-packages-with-npm.json b/05-apis-and-microservices/managing-packages-with-npm.json index f96f29e..6343d9c 100644 --- a/05-apis-and-microservices/managing-packages-with-npm.json +++ b/05-apis-and-microservices/managing-packages-with-npm.json @@ -8,9 +8,9 @@ "id": "587d7fb3367417b2b2512bfb", "title": "How to Use package.json, the Core of Any Node.js Project or npm Package", "description": [ - "package.json 是任何 Node.js 项目或 npm 包的中心。它存储项目的相关信息，就像 HTML 文档中的 区域是用来描述网页的通用信息（元信息）一样。package.json 由单个 JSON 对象组成，它以键值对的形式存储项目的信息。一个最小的 package.json 文件至少包含两个必须字段：name 和 version —— 但是提供有关项目的附加信息是一个更好的做法，在以后它可能对你的用户或者维护者有所帮助。", + "package.json 是任何 Node.js 项目或 npm 包的中心。它存储项目的相关信息，就像 HTML 文档中的 区域是用来描述网页的通用信息（元信息）一样。package.json 由单个 JSON 对象组成，它以键值对的形式存储项目的信息。一个最小的 package.json 文件至少包含两个必须字段：name 和 version——但是提供有关项目的附加信息是一个更好的做法，在以后它可能对你的用户或者维护者有所帮助。", "author 字段", - "如果你转到之前设置的 Glitch 项目并查看屏幕左侧，你会看到一个文件树，你可以在其中查看项目中各种文件的概述。在文件树的末尾部分，你会看到 package.json —— 我们将在接下来的几个挑战中改进这个文件。", + "如果你转到之前设置的 Glitch 项目并查看屏幕左侧，你会看到一个文件树，你可以在其中查看项目中各种文件的概述。在文件树的末尾部分，你会看到 package.json——我们将在接下来的几个挑战中改进这个文件。", "这个文件中最常见的信息之一是 author 字段，它指定了谁是项目的创建者。它可以是字符串，也可以是带有联系人详细信息的对象。对于较大的项目，建议使用对象，但是在我们的例子中，一个简单的字符串就可以了，比如下面的例子。", "\"author\": \"Jane Doe\",", "说明", @@ -155,14 +155,14 @@ "id": "587d7fb5367417b2b2512c01", "title": "Manage npm Dependencies By Understanding Semantic Versioning", "description": [ - "在 package.json 中，dependencies 这部分的 npm 包的版本号遵循所谓的语义化版本（SemVer），它是一种软件版本控制的行业标准，旨在使管理依赖项更加容易。在 npm 上发布的库、框架或其它工具都应该使用语义化版本（SemVer），以便可以清楚的告知用户，项目的依赖包在更新时可以预期的变化。", - "在没有公共 API 的项目中，语义化版本（SemVer）没有意义 —— 除非你的项目与上面的例子类似，否则请使用其它的版本控制格式吧。", + "在 package.json 中，dependencies 这部分的 npm 包的版本号遵循所谓的语义化版本（SemVer），它是一种软件版本控制的行业标准，旨在使管理依赖项更加容易。在 npm 上发布的库、框架或其它工具都应该使用语义化版本（SemVer），以便让使用该依赖包的用户能够在依赖包需要升级时，提前规划自己的项目需要为之做出的改动。", + "在没有公共 API 的项目中，语义化版本（SemVer）没有意义——除非你的项目与上面的例子类似，否则请使用其它的版本控制方式吧。", "为什么你需要了解语义化版本（SemVer）？", - "在开发使用外部依赖项的软件（大多数情况都是这样）时，了解语义化版本（SemVer）会很有用。有一天你会明白这些数字的含义，在项目中它可以避免你意外地引入一些重大更改，同时也能避免“昨天还是好好的”今天就不工作了这种情况发生。", + "在开发使用外部依赖项的软件（大多数情况都是这样）时，了解语义化版本（SemVer）会很有用。有一天你会明白这些数字的含义，在项目中它可以避免你意外地引入一些非向下兼容的更改，同时也能避免“昨天还能好好的运行，今天就不行了”这种情况发生。", "根据语义化版本（SemVer）官方网站，它是这样规定的：", - "版本格式：主版本号.次版本号.修订号，版本号递增规则如下：", - "主版本号：当你做了不兼容的 API 修改，", - "次版本号：当你做了向下兼容的功能性新增，", + "版本格式：主版本号.次版本号.修订号，版本号递增规则如下：", + "主版本号：当你做了不向下兼容的公共 API 修改，", + "次版本号：当你添加了向下兼容的新功能，", "修订号：当你做了向下兼容的问题修正。", "这意味着修订号是用来修复错误的，次版本号则是添加了新功能，但它们都没有破坏之前的功能。最后，主版本号的变更则是添加了对早期版本不兼容的更改。", "例子", @@ -188,12 +188,12 @@ "id": "587d7fb5367417b2b2512c02", "title": "Use the Tilde-Character to Always Use the Latest Patch Version of a Dependency", "description": [ - "在最后一个挑战中，我们告诉 npm 只包含特定版本的依赖包。如果想让项目各个部分保持相互兼容，冻结依赖是一个有效的办法。但是大多数情况下，我们并不希望错过依赖项的问题修复，因为它们通常包含重要的安全补丁，并且希望这样可以持续正常的工作。", - "为了让 npm 依赖项更新到最新的修订版，你可以在依赖包的版本号前加一个波浪号（~）。在 package.json 中，我们当前的 moment 依赖包更新规则是：仅使用特定版本（2.10.2），但我们想用它最新的 2.10.x 版本。", + "在最后一个挑战中，我们告诉 npm 只包含特定版本的依赖包。如果想让项目各个部分保持相互兼容，锁定定依赖包版本是一个有效的办法。但是大多数情况下，我们并不希望错过依赖项的问题修复，因为它们通常包含重要的安全补丁，而且它们理论上也会兼容我们既有的代码。", + "为了让 npm 依赖项更新到最新的修订版，你可以在依赖包的版本号前加一个英文的波浪号（~）。在 package.json 中，我们当前的 moment 依赖包更新规则是：仅使用特定版本（2.10.2），但我们想用它最新的 2.10.x 版本。", "例子", - "\"some-package-name\": \"~1.3.8\" 可以更新到任何 1.3.x 版本。", + "\"some-package-name\": \"~1.3.8\" 定义这个包允许使用的版本为 1.3.x。", "说明", - "在 dependencies 中，给 moment 的版本号添加波浪号（~）前缀，允许 npm 将其更新为最新的修订版。", + "在 dependencies 中，给 moment 的版本号添加英文的波浪号（~）前缀，允许 npm 将其更新为最新的修订版。", "请注意，原本的版本号不用更改。" ], "tests": [ From 25654beb5bb9a9dfdfccac7049d00a0781633f72 Mon Sep 17 00:00:00 2001 From: ifyour Date: Sun, 22 Jul 2018 18:28:49 +0800 Subject: [PATCH 06/15] fix typo --- 05-apis-and-microservices/managing-packages-with-npm.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/05-apis-and-microservices/managing-packages-with-npm.json b/05-apis-and-microservices/managing-packages-with-npm.json index 6343d9c..ce74ecb 100644 --- a/05-apis-and-microservices/managing-packages-with-npm.json +++ b/05-apis-and-microservices/managing-packages-with-npm.json @@ -188,7 +188,7 @@ "id": "587d7fb5367417b2b2512c02", "title": "Use the Tilde-Character to Always Use the Latest Patch Version of a Dependency", "description": [ - "在最后一个挑战中，我们告诉 npm 只包含特定版本的依赖包。如果想让项目各个部分保持相互兼容，锁定定依赖包版本是一个有效的办法。但是大多数情况下，我们并不希望错过依赖项的问题修复，因为它们通常包含重要的安全补丁，而且它们理论上也会兼容我们既有的代码。", + "在最后一个挑战中，我们告诉 npm 只包含特定版本的依赖包。如果想让项目各个部分保持相互兼容，锁定依赖包版本是一个有效的办法。但是大多数情况下，我们并不希望错过依赖项的问题修复，因为它们通常包含重要的安全补丁，而且它们理论上也会兼容我们既有的代码。", "为了让 npm 依赖项更新到最新的修订版，你可以在依赖包的版本号前加一个英文的波浪号（~）。在 package.json 中，我们当前的 moment 依赖包更新规则是：仅使用特定版本（2.10.2），但我们想用它最新的 2.10.x 版本。", "例子", "\"some-package-name\": \"~1.3.8\" 定义这个包允许使用的版本为 1.3.x。", From dd8ee95c0a7606184b81cd85fe1f038a9df6610a Mon Sep 17 00:00:00 2001 From: DeJavuJo Date: Mon, 23 Jul 2018 10:44:27 +0800 Subject: [PATCH 07/15] =?UTF-8?q?01-responsive-web-design/css-flexbox.json?= =?UTF-8?q?=20=E7=BF=BB=E8=AF=91=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 01-responsive-web-design/css-flexbox.json | 269 ++++++++++++---------- 1 file changed, 143 insertions(+), 126 deletions(-) diff --git a/01-responsive-web-design/css-flexbox.json b/01-responsive-web-design/css-flexbox.json index 5fac9b8..8f66dc6 100644 --- a/01-responsive-web-design/css-flexbox.json +++ b/01-responsive-web-design/css-flexbox.json @@ -8,21 +8,22 @@ "id": "587d78ab367417b2b2512af0", "title": "Use display: flex to Position Two Boxes", "description": [ - "This section uses alternating challenge styles to show how to use CSS to position elements in a flexible way. First, a challenge will explain theory, then a practical challenge using a simple tweet component will apply the flexbox concept.", - "Placing the CSS property display: flex; on an element allows you to use other flex properties to build a responsive page.", + "这节会使用另一个挑战方法为你介绍 CSS 弹性盒子。挑战会先解释理论，然后动手做一个弹性盒子布局的简单的推文组件。" , + "给一个元素赋予 CSS 属性 display: flex;，你就可以使用其他 flex 属性构建响应式页面了。", "
", - "Add the CSS property display to #box-container and set its value to flex." + "为 #box-container 添加 display 属性，设置为 flex。" ], "tests": [ { - "text": "#box-container should have the display property set to a value of flex.", - "testString": "assert($('#box-container').css('display') == 'flex', '#box-container should have the display property set to a value of flex.');" + "text": "#box-container 应有 display 属性，其值应为 flex。", + "testString": "assert($('#box-container').css('display') == 'flex', '#box-container 应有 display 属性，其值应为 flex。');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, + "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -63,45 +64,46 @@ "id": "587d78ab367417b2b2512af1", "title": "Add Flex Superpowers to the Tweet Embed", "description": [ - "To the right is the tweet embed that will be used as the practical example. Some of the elements would look better with a different layout. The last challenge demonstrated display: flex. Here you'll add it to several components in the tweet embed to start adjusting their positioning.", + "我们以右边的内嵌推文为基础开始实践。一些元素换一个布局方式或许更好看。上一个挑战演示了 display: flex，现在你需要把它添加到内嵌推文的多个组件来调整它们的位置。", "
", - "Add the CSS property display: flex to all of the following items - note that the selectors are already set up in the CSS:", - "header, the header's .profile-name, the header's .follow-btn, the header's h3 and h4, the footer, and the footer's .stats." + "为下列项目添加 CSS 属性 display: flex —— 注意，选择器已在 CSS 中准备好：", + "header、header 的 .profile-name、header 的 .follow-btn、header 的 h3 和 h4、footer 以及 footer 的 .stats。" ], "tests": [ { - "text": "Your header should have a display property set to flex.", - "testString": "assert($('header').css('display') == 'flex', 'Your header should have a display property set to flex.');" + "text": "header 的 display 属性应为 flex。", + "testString": "assert($('header').css('display') == 'flex', 'header 的 display 属性应为 flex。');" }, { - "text": "Your footer should have a display property set to flex.", - "testString": "assert($('footer').css('display') == 'flex', 'Your footer should have a display property set to flex.');" + "text": "footer 的 display 属性应为 flex。", + "testString": "assert($('footer').css('display') == 'flex', 'footer 的 display 属性应为 flex。');" }, { - "text": "Your h3 should have a display property set to flex.", - "testString": "assert($('h3').css('display') == 'flex', 'Your h3 should have a display property set to flex.');" + "text": "h3 的 display 属性应为 flex。", + "testString": "assert($('h3').css('display') == 'flex', 'h3 的 display 属性应为 flex。');" }, { - "text": "Your h4 should have a display property set to flex.", - "testString": "assert($('h4').css('display') == 'flex', 'Your h4 should have a display property set to flex.');" + "text": "h4 的 display 属性应为 flex。", + "testString": "assert($('h4').css('display') == 'flex', 'h4 的 display 属性应为 flex。');" }, { - "text": "Your .profile-name should have a display property set to flex.", - "testString": "assert($('.profile-name').css('display') == 'flex', 'Your .profile-name should have a display property set to flex.');" + "text": ".profile-name 的 display 属性应为 flex。", + "testString": "assert($('.profile-name').css('display') == 'flex', '.profile-name 的 display 属性应为 flex。');" }, { - "text": "Your .follow-btn should have a display property set to flex.", - "testString": "assert($('.follow-btn').css('display') == 'flex', 'Your .follow-btn should have a display property set to flex.');" + "text": ".follow-btn 的 display 属性应为 flex。", + "testString": "assert($('.follow-btn').css('display') == 'flex', '.follow-btn 的 display 属性应为 flex。');" }, { - "text": "Your .stats should have a display property set to flex.", - "testString": "assert($('.stats').css('display') == 'flex', 'Your .stats should have a display property set to flex.');" + "text": ".stats 的 display 属性应为 flex。", + "testString": "assert($('.stats').css('display') == 'flex', '.stats 的 display 属性应为 flex。');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, + "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -207,22 +209,23 @@ "id": "587d78ab367417b2b2512af2", "title": "Use the flex-direction Property to Make a Row", "description": [ - "Adding display: flex to an element turns it into a flex container. This makes it possible to align any children of that element into rows or columns. You do this by adding the flex-direction property to the parent item and setting it to row or column. Creating a row will align the children horizontally, and creating a column will align the children vertically.", - "Other options for flex-direction are row-reverse and column-reverse.", - "Note
The default value for the flex-direction property is row.", + "添加了 display: flex 的元素会成为 flex 容器。只要把 flex-direction 属性添加到父元素，并设置其为 row 或 column，便可以轻易横或竖排列它的子元素。设为 row 可以让子元素水平排列，column 可以让子元素垂直排列。", + "flex-direction 的其他选项还有 row-reverse 和 column-reverse。", + "注意
flex-direction 的默认值为 row。", "
", - "Add the CSS property flex-direction to the #box-container element, and give it a value of row-reverse." + "为 #box-container 添加 CSS 属性 flex-direction，其值设为 row-reverse。" ], "tests": [ { - "text": "The #box-container element should have a flex-direction property set to row-reverse.", - "testString": "assert($('#box-container').css('flex-direction') == 'row-reverse', 'The #box-container element should have a flex-direction property set to row-reverse.');" + "text": "#box-container 应有 flex-direction 属性，其值应为 row-reverse。", + "testString": "assert($('#box-container').css('flex-direction') == 'row-reverse', '#box-container 应有 flex-direction 属性，其值应为 row-reverse。');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, + "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -262,24 +265,25 @@ "id": "587d78ab367417b2b2512af3", "title": "Apply the flex-direction Property to Create Rows in the Tweet Embed", "description": [ - "The header and footer in the tweet embed example have child items that could be arranged as rows using the flex-direction property. This tells CSS to align the children horizontally.", + "内嵌推文样例中的 header 和 footer 有自己的子元素，使用 flex-direction 属性可以把这些子元素排列成一行。这个属性告诉 CSS 需要将这个元素的子元素水平排列。", "
", - "Add the CSS property flex-direction to both the header and footer and set the value to row." + "为 header 和 footer 添加 CSS 属性 flex-direction 并把值设为 row。" ], "tests": [ { - "text": "The header should have a flex-direction property set to row.", - "testString": "assert(code.match(/header\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-direction:\\s*?row;/g), 'The header should have a flex-direction property set to row.');" + "text": "header 应有 flex-direction 属性，其值应为 row。", + "testString": "assert(code.match(/header\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-direction:\\s*?row;/g), 'header 应有 flex-direction 属性，其值应为 row。');" }, { - "text": "The footer should have a flex-direction property set to row.", - "testString": "assert(code.match(/footer\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-direction:\\s*?row;/g), 'The footer should have a flex-direction property set to row.');" + "text": "footer 应有 flex-direction 属性，其值应为 row。", + "testString": "assert(code.match(/footer\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-direction:\\s*?row;/g), 'footer 应有 flex-direction 属性，其值应为 row。');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, + "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -387,20 +391,21 @@ "id": "587d78ac367417b2b2512af4", "title": "Use the flex-direction Property to Make a Column", "description": [ - "The last two challenges used the flex-direction property set to row. This property can also create a column by vertically stacking the children of a flex container.", + "之前两项挑战把 flex-direction 设为 row。这个属性还能创建一个列，让子元素垂直层叠在 flex 容器中。", "
", - "Add the CSS property flex-direction to the #box-container element, and give it a value of column." + "添加 CSS 属性 flex-direction 到 #box-container 元素，赋值为 column。" ], "tests": [ { - "text": "The #box-container element should have a flex-direction property set to column.", - "testString": "assert($('#box-container').css('flex-direction') == 'column', 'The #box-container element should have a flex-direction property set to column.');" + "text": "#box-container 应有 flex-direction 属性，其值应为 column。", + "testString": "assert($('#box-container').css('flex-direction') == 'column', '#box-container 应有 flex-direction 属性，其值应为 column。');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, + "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -440,20 +445,21 @@ "id": "587d78ac367417b2b2512af5", "title": "Apply the flex-direction Property to Create a Column in the Tweet Embed", "description": [ - "The tweet embed header and footer used the flex-direction property earlier with a row value. Similarly, the items inside the .profile-name element would work well stacked as a column.", + "上面，内嵌推文的 header 和 footer 把 flex-direction 属性设为 row。相似地， .profile-name 里的元素或许竖着排列会好看一点。", "
", - "Add the CSS property flex-direction to the header's .profile-name element and set the value to column." + "在 header 的 .profile-name 元素添加 CSS 属性 flex-direction，将其值设为 column。" ], "tests": [ { - "text": "The .profile-name element should have a flex-direction property set to column.", - "testString": "assert($('.profile-name').css('flex-direction') == 'column', 'The .profile-name element should have a flex-direction property set to column.');" + "text": ".profile-name 应有 flex-direction 属性，其值应为 column。", + "testString": "assert($('.profile-name').css('flex-direction') == 'column', '.profile-name 应有 flex-direction 属性，其值应为 column。');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, + "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -558,25 +564,26 @@ "id": "587d78ac367417b2b2512af6", "title": "Align Elements Using the justify-content Property", "description": [ - "Sometimes the flex items within a flex container do not fill all the space in the container. It is common to want to tell CSS how to align and space out the flex items a certain way. Fortunately, the justify-content property has several options to do this. But first, there is some important terminology to understand before reviewing those options.", - "Here is a useful image showing a row to illustrate the concepts below.", - "Recall that setting a flex container as a row places the flex items side-by-side from left-to-right. A flex container set as a column places the flex items in a vertical stack from top-to-bottom. For each, the direction the flex items are arranged is called the main axis. For a row, this is a horizontal line that cuts through each item. And for a column, the main axis is a vertical line through the items.", - "There are several options for how to space the flex items along the line that is the main axis. One of the most commonly used is justify-content: center;, which aligns all the flex items to the center inside the flex container. Others options include:", - "
  • flex-start: aligns items to the start of the flex container. For a row, this pushes the items to the left of the container. For a column, this pushes the items to the top of the container.
  • flex-end: aligns items to the end of the flex container. For a row, this pushes the items to the right of the container. For a column, this pushes the items to the bottom of the container.
  • space-between: aligns items to the center of the main axis, with extra space placed between the items. The first and last items are pushed to the very edge of the flex container. For example, in a row the first item is against the left side of the container, the last item is against the right side of the container, then the other items between them are spaced evenly.
  • space-around: similar to space-between but the first and last items are not locked to the edges of the container, the space is distributed around all the items
", + "flex 容器里的 flex 项目有时不能充满整个容器，所以我们需要告诉 CSS 如何以特定方案排列和调整 flex 项目。幸运的是，我们有 justify-content 属性处理这个问题。但在介绍 justify-content 的选项之前，我们要先理解一些重要术语。", + "这张图片的元素横着排列，很好地描述了下面的概念。", + "回忆一下，把 flex 容器设为一个行，它的子元素会从左到右逐个排列，把 flex 容器设为一个列，它的子元素会从上到下垂直叠在一起。子元素排列的方向被称为 main axis（主轴）。对于行，主轴水平贯穿每一个项目；对于列，主轴垂直贯穿每一个项目。", + "这是几个 flex 项目在主轴排列方式的选项：其中一个很常用的选项是 justify-content: center;，可以让 flex 项目排列在 flex 容器中间。其他选项还包括：", + "
  • flex-start：从 flex 容器的前端开始排列项目。对行来说是把项目都靠左放，对于列是把项目都靠顶部放。
  • flex-end：从 flex 容器的后端开始排列项目。对行来说是把项目都靠右放，对于列是把项目都靠底部放。
  • space-between：项目间保留一定空位地在主轴排列。第一个和最后一个项目会被挤到容器边沿。例如，在行中第一个项目会紧贴着容器左侧，最后一个项目会紧贴着容器右侧，然后其他项目均匀排布。
  • space-around：与 space-between 相似，但头尾两个项目不会紧贴容器边缘，空间会均匀分布在所有项目两边
", "
", - "An example helps show this property in action. Add the CSS property justify-content to the #box-container element, and give it a value of center.", - "Bonus
Try the other options for the justify-content property in the code editor to see their differences. But note that a value of center is the only one that will pass this challenge." + "这个例子可以帮助你理解这个属性，在 #box-container 元素添加 CSS 属性 justify-content，其值为 center。", + "Bonus
在编辑器里试试 justify-content 的其他选项，看看它们之间的区别。但要通过挑战必须把值设为 center 哦。" ], "tests": [ { - "text": "The #box-container element should have a justify-content property set to a value of center.", - "testString": "assert($('#box-container').css('justify-content') == 'center', 'The #box-container element should have a justify-content property set to a value of center.');" + "text": "#box-container 应有 justify-content 属性，其值应为 center。", + "testString": "assert($('#box-container').css('justify-content') == 'center', '#box-container 应有 justify-content 属性，其值应为 center。');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, + "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -617,20 +624,21 @@ "id": "587d78ac367417b2b2512af7", "title": "Use the justify-content Property in the Tweet Embed", "description": [ - "The last challenge showed an example of the justify-content property. For the tweet embed, this property can be applied to align the items in the .profile-name element.", + "上一项挑战展示了 justify-content 属性的作用。对于内嵌推文，可以应用在 .profile-name，以对齐它的子元素。", "
", - "Add the CSS property justify-content to the header's .profile-name element and set the value to any of the options from the last challenge." + "在 header 的 .profile-name 元素添加 CSS 属性 justify-content ，把它的值设为上面挑战提到的任意选项。" ], "tests": [ { - "text": "The .profile-name element should have the justify-content property set to any of these values: center, flex-start, flex-end, space-between, or space-around.", - "testString": "assert(code.match(/header\\s.profile-name\\s*{\\s*?.*?\\s*?.*?\\s*?\\s*?.*?\\s*?justify-content\\s*:\\s*(center|flex-start|flex-end|space-between|space-around)\\s*;/g), 'The .profile-name element should have the justify-content property set to any of these values: center, flex-start, flex-end, space-between, or space-around.');" + "text": ".profile-name 元素的 justify-content 属性可选以下值:center、flex-start、flex-end、space-between、space-around。", + "testString": "assert(code.match(/header\\s.profile-name\\s*{\\s*?.*?\\s*?.*?\\s*?\\s*?.*?\\s*?justify-content\\s*:\\s*(center|flex-start|flex-end|space-between|space-around)\\s*;/g), '.profile-name 元素的 justify-content 属性可选以下值:center、flex-start、flex-end、space-between、space-around。');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, + "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -736,25 +744,26 @@ "id": "587d78ad367417b2b2512af8", "title": "Align Elements Using the align-items Property", "description": [ - "The align-items property is similar to justify-content. Recall that the justify-content property aligned flex items along the main axis. For rows, the main axis is a horizontal line and for columns it is a vertical line.", - "Flex containers also have a cross axis which is the opposite of the main axis. For rows, the cross axis is vertical and for columns, the cross axis is horizontal.", - "CSS offers the align-items property to align flex items along the cross axis. For a row, it tells CSS how to push the items in the entire row up or down within the container. And for a column, how to push all the items left or right within the container.", - "The different values available for align-items include:", - "
  • flex-start: aligns items to the start of the flex container. For rows, this aligns items to the top of the container. For columns, this aligns items to the left of the container.
  • flex-end: aligns items to the end of the flex container. For rows, this aligns items to the bottom of the container. For columns, this aligns items to the right of the container.
  • center: align items to the center. For rows, this vertically aligns items (equal space above and below the items). For columns, this horizontally aligns them (equal space to the left and right of the items).
  • stretch: stretch the items to fill the flex container. For example, rows items are stretched to fill the flex container top-to-bottom.
  • baseline: align items to their baselines. Baseline is a text concept, think of it as the line that the letters sit on.
", + "align-items 属性与 justify-content 类似。回忆一下，justify-content 属性使 flex 项目沿主轴排列。行的主轴是水平线，列的主轴是垂直线。", + "Flex 容器中，与主轴垂直的，被称为 cross axis（交叉轴）。行的交叉轴是垂直的，列的交叉轴是水平的。", + "CSS 提供了 align-items 属性，可以用于在交叉轴调整 flex 项目。对于行，它规定了项目在容器中应该靠上还是靠下，而对于列，就是靠左或靠右。", + "align-items 的可选值包括：", + "
  • flex-start：从 flex 容器的前端开始排列项目。对行来说是把项目都靠顶部放，对于列是把项目都靠左放。
  • flex-end：从 flex 容器的后端开始排列项目。对行来说是把项目都靠底部放，对于列是把项目都靠右放。
  • center：把项目的位置调整到中间。对于行，垂直居中（项目上下方空间相等）。对于列，水平居中（项目左右方空间相等）。
  • stretch：拉伸项目，填满 flex 容器。例如，排成行的项目从容器顶部拉伸到底部。
  • baseline：基线对其地排列。基线是字体相关的概念，可以认为字体坐落在基线上。
", "
", - "An example helps show this property in action. Add the CSS property align-items to the #box-container element, and give it a value of center.", - "Bonus
Try the other options for the align-items property in the code editor to see their differences. But note that a value of center is the only one that will pass this challenge." + "这个例子可以帮助你理解这个属性，在 #box-container 添加 CSS 属性 align-items 并将值设为 center。", + "Bonus
在编辑器里试试 align-items 的其他选项，看看它们之间的区别。但要通过挑战必须把值设为 center 哦。" ], "tests": [ { - "text": "The #box-container element should have an align-items property set to a value of center.", - "testString": "assert($('#box-container').css('align-items') == 'center', 'The #box-container element should have an align-items property set to a value of center.');" + "text": "#box-container 元素应有 align-items 属性，其值应为 center。", + "testString": "assert($('#box-container').css('align-items') == 'center', '#box-container 元素应有 align-items 属性，其值应为 center。');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, + "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -795,20 +804,21 @@ "id": "587d78ad367417b2b2512af9", "title": "Use the align-items Property in the Tweet Embed", "description": [ - "The last challenge introduced the align-items property and gave an example. This property can be applied to a few tweet embed elements to align the flex items inside them.", + "上一个挑战介绍了 align-items 并给出了例子。这个属性可以应用在不少元素上，调整它们的子元素的位置。", "
", - "Add the CSS property align-items to the header's .follow-btn element. Set the value to center." + "在 header 的 .follow-btn 添加 CSS 属性 align-items，把值设为 center。" ], "tests": [ { - "text": "The .follow-btn element should have the align-items property set to a value of center.", - "testString": "assert($('.follow-btn').css('align-items') == 'center', 'The .follow-btn element should have the align-items property set to a value of center.');" + "text": ".follow-btn 应有 align-items 属性，其值应为 center.", + "testString": "assert($('.follow-btn').css('align-items') == 'center', '.follow-btn 应有 align-items 属性，其值应为 center.');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, + "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -916,23 +926,24 @@ "id": "587d78ad367417b2b2512afa", "title": "Use the flex-wrap Property to Wrap a Row or Column", "description": [ - "CSS flexbox has a feature to split a flex item into multiple rows (or columns). By default, a flex container will fit all flex items together. For example, a row will all be on one line.", - "However, using the flex-wrap property, it tells CSS to wrap items. This means extra items move into a new row or column. The break point of where the wrapping happens depends on the size of the items and the size of the container.", - "CSS also has options for the direction of the wrap:", - "
  • nowrap: this is the default setting, and does not wrap items.
  • wrap: wraps items from left-to-right if they are in a row, or top-to-bottom if they are in a column.
  • wrap-reverse: wraps items from bottom-to-top if they are in a row, or left-to-right if they are in a column.
", + "CSS flexbox 有一个把 flex 项目拆分为多行（或列）的特性。默认情况下，flex 容器会调整项目大小，把它们都塞到一起。如果是行的话，所有项目都会在一条直线上。", + "不过，使用 flex-wrap 属性可以使项目换行。这意味着多出来的项目会被移到新的行或列。换行发生的断点由项目和容器的大小决定。", + "CSS 还有关于换行方向的选项：", + "
  • nowrap：默认选项，不换行。
  • wrap：行从上到下排，列从左到又排。
  • wrap-reverse：行从下到上排，列从右到左排。
", "
", - "The current layout has too many boxes for one row. Add the CSS property flex-wrap to the #box-container element, and give it a value of wrap." + "现在的布局一行里面元素太多了，在 #box-container 元素添加 CSS 属性 flex-wrap，把值设为 wrap。" ], "tests": [ { - "text": "The #box-container element should have the flex-wrap property set to a value of wrap.", - "testString": "assert($('#box-container').css('flex-wrap') == 'wrap', 'The #box-container element should have the flex-wrap property set to a value of wrap.');" + "text": "#box-container 元素应有 flex-wrap 属性，其值应为 wrap。", + "testString": "assert($('#box-container').css('flex-wrap') == 'wrap', '#box-container 元素应有 flex-wrap 属性，其值为 wrap。');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, + "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -997,26 +1008,27 @@ "id": "587d78ad367417b2b2512afb", "title": "Use the flex-shrink Property to Shrink Items", "description": [ - "So far, all the properties in the challenges apply to the flex container (the parent of the flex items). However, there are several useful properties for the flex items.", - "The first is the flex-shrink property. When it's used, it allows an item to shrink if the flex container is too small. Items shrink when the width of the parent container is smaller than the combined widths of all the flex items within it.", - "The flex-shrink property takes numbers as values. The higher the number, the more it will shrink compared to the other items in the container. For example, if one item has a flex-shrink value of 1 and the other has a flex-shrink value of 3, the one with the value of 3 will shrink three times as much as the other.", + "目前为止，挑战里的提到的属性都应用于 flex 容器（flex 项目的父元素）。除此之外，flex 项目也有很多实用属性。", + "首先介绍的是 flex-shrink 属性。使用之后，如果 flex 容器太小，该项目会自动缩小。当容器的宽度小于里面所有项目的宽度，项目就会自动压缩。", + "flex-shrink 属性接受 number 类型的值。数值越大，与其他项目相比会被压缩得更厉害。例如，如果一个项目的 flex-shrink 为 1 ，另一个项目 flex-shrink 为 3，那么 3 的那个与另一个相比会受到 3 倍压缩。", "
", - "Add the CSS property flex-shrink to both #box-1 and #box-2. Give #box-1 a value of 1 and #box-2 a value of 2." + "为 #box-1 和 #box-2 添加 CSS 属性 flex-shrink，#box-1 的值设为 1， and #box-2 的值设为 2。" ], "tests": [ { - "text": "The #box-1 element should have the flex-shrink property set to a value of 1.", - "testString": "assert($('#box-1').css('flex-shrink') == '1', 'The #box-1 element should have the flex-shrink property set to a value of 1.');" + "text": "#box-1 元素应有 flex-shrink 属性，其值应为 1.", + "testString": "assert($('#box-1').css('flex-shrink') == '1', '#box-1 元素应有 flex-shrink 属性，其值应为 1.');" }, { - "text": "The #box-2 element should have the flex-shrink property set to a value of 2.", - "testString": "assert($('#box-2').css('flex-shrink') == '2', 'The #box-2 element should have the flex-shrink property set to a value of 2.');" + "text": "#box-2 元素应有 flex-shrink 属性，其值应为 2.", + "testString": "assert($('#box-2').css('flex-shrink') == '2', '#box-2 元素应有 flex-shrink 属性，其值应为 2.');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, + "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -1057,25 +1069,26 @@ "id": "587d78ae367417b2b2512afc", "title": "Use the flex-grow Property to Expand Items", "description": [ - "The opposite of flex-shrink is the flex-grow property. Recall that flex-shrink controls the size of the items when the container shrinks. The flex-grow property controls the size of items when the parent container expands.", - "Using a similar example from the last challenge, if one item has a flex-grow value of 1 and the other has a flex-grow value of 3, the one with the value of 3 will grow three times as much as the other.", + "与 flex-shrink 相对的是 flex-grow。回忆 flex-shrink 在容器太小时作控制，flex-grow 属性是在容器太大时作控制.", + "例子与上一个挑战相似，如果一个项目 flex-grow 属性的值为 1，另一个 flex-grow 为 3，那么 3 的会比 1 的扩大三倍。", "
", - "Add the CSS property flex-grow to both #box-1 and #box-2. Give #box-1 a value of 1 and #box-2 a value of 2." + "为 #box-1 和 #box-2 添加 CSS 属性 flex-grow，#box-1 的值设为 1， and #box-2 的值设为 2。" ], "tests": [ { - "text": "The #box-1 element should have the flex-grow property set to a value of 1.", - "testString": "assert($('#box-1').css('flex-grow') == '1', 'The #box-1 element should have the flex-grow property set to a value of 1.');" + "text": "#box-1 元素应有 flex-grow 属性，其值应为 1。", + "testString": "assert($('#box-1').css('flex-grow') == '1', '#box-1 元素应有 flex-grow 属性，其值应为 1。');" }, { - "text": "The #box-2 element should have the flex-grow property set to a value of 2.", - "testString": "assert($('#box-2').css('flex-grow') == '2', 'The #box-2 element should have the flex-grow property set to a value of 2.');" + "text": "#box-2 元素应有 flex-grow 属性，其值应为 2。", + "testString": "assert($('#box-2').css('flex-grow') == '2', '#box-2 元素应有 flex-grow 属性，其值应为 2。');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, + "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -1115,33 +1128,34 @@ "id": "587d78ae367417b2b2512afd", "title": "Use the flex-basis Property to Set the Initial Size of an Item", "description": [ - "The flex-basis property specifies the initial size of the item before CSS makes adjustments with flex-shrink or flex-grow.", - "The units used by the flex-basis property are the same as other size properties (px, em, %, etc.). The value auto sizes items based on the content.", + "flex-basis 属性指定了项目在 CSS 进行 flex-shrink 或 flex-grow 调整前的初始大小。", + "flex-basis 属性的单位与其他 size 属性一致（px、em、% 等）。如果值为 auto，项目的大小依赖于自身内容。", "
", - "Set the initial size of the boxes using flex-basis. Add the CSS property flex-basis to both #box-1 and #box-2. Give #box-1 a value of 10em and #box-2 a value of 20em." + "使用 flex-basis 为盒子设置原始值。在 #box-1 和 #box-2 添加 CSS 属性 flex-basis。设置 #box-1 为 10em，#box-2 为 20em。" ], "tests": [ { - "text": "The #box-1 element should have a flex-basis property.", - "testString": "assert($('#box-1').css('flex-basis') != 'auto', 'The #box-1 element should have a flex-basis property.');" + "text": "#box-1 元素应有 flex-basis 属性。", + "testString": "assert($('#box-1').css('flex-basis') != 'auto', '#box-1 元素应有 flex-basis 属性。');" }, { - "text": "The #box-1 element should have a flex-basis value of 10em.", - "testString": "assert(code.match(/#box-1\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-basis:\\s*?10em;/g), 'The #box-1 element should have a flex-basis value of 10em.');" + "text": "#box-1 的 flex-basis 应为 10em。", + "testString": "assert(code.match(/#box-1\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-basis:\\s*?10em;/g), '#box-1 的 flex-basis 应为 10em。');" }, { - "text": "The #box-2 element should have the flex-basis property.", - "testString": "assert($('#box-2').css('flex-basis') != 'auto', 'The #box-2 element should have the flex-basis property.');" + "text": "#box-2 元素应有 flex-basis 属性。", + "testString": "assert($('#box-2').css('flex-basis') != 'auto', '#box-2 元素应有 flex-basis 属性。');" }, { - "text": "The #box-2 element should have a flex-basis value of 20em.", - "testString": "assert(code.match(/#box-2\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-basis:\\s*?20em;/g), 'The #box-2 element should have a flex-basis value of 20em.');" + "text": "#box-2 的 flex-basis 应为 20em。", + "testString": "assert(code.match(/#box-2\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-basis:\\s*?20em;/g), '#box-2 的 flex-basis 应为 20em。');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, + "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -1181,31 +1195,32 @@ "id": "587d78ae367417b2b2512afe", "title": "Use the flex Shorthand Property", "description": [ - "There is a shortcut available to set several flex properties at once. The flex-grow, flex-shrink, and flex-basis properties can all be set together by using the flex property.", - "For example, flex: 1 0 10px; will set the item to flex-grow: 1;, flex-shrink: 0;, and flex-basis: 10px;.", - "The default property settings are flex: 0 1 auto;.", + "上面几个 flex 属性有一个缩写法。flex-grow、flex-shrink 和 flex-basis 属性可以在 flex 中一同设置。", + "例如，flex: 1 0 10px; 会把项目属性设为 flex-grow: 1;、flex-shrink: 0; 以及 flex-basis: 10px;。", + "属性的默认设置是 flex: 0 1 auto;。", "
", - "Add the CSS property flex to both #box-1 and #box-2. Give #box-1 the values so its flex-grow is 2, its flex-shrink is 2, and its flex-basis is 150px. Give #box-2 the values so its flex-grow is 1, its flex-shrink is 1, and its flex-basis is 150px.", - "These values will cause #box-1 to grow to fill the extra space at twice the rate of #box-2 when the container is greater than 300px and shrink at twice the rate of #box-2 when the container is less than 300px. 300px is the combined size of the flex-basis values of the two boxes." + "在 #box-1 and #box-2 添加 flex 属性。把 #box-1 设置成 flex-grow 为 2，flex-shrink 为 2, flex-basis 为 150px。把 #box-2 设置成 flex-grow 为 1，flex-shrink 为 1，flex-basis 为 150px。", + "上面设置的属性,在容器大于 300px 时，会让 #box-1 填充倍率为 #box-2 的两倍；在容器小于 300px 时，缩小倍率为 #box-2 的两倍。300px 是两个盒子的 flex-basis 的值之和。" ], "tests": [ { - "text": "The #box-1 element should have the flex property set to a value of 2 2 150px.", - "testString": "assert($('#box-1').css('flex-grow') == '2' && $('#box-1').css('flex-shrink') == '2' && $('#box-1').css('flex-basis') == '150px', 'The #box-1 element should have the flex property set to a value of 2 2 150px.');" + "text": "#box-1 元素应有 flex 属性，其值应为 2 2 150px。", + "testString": "assert($('#box-1').css('flex-grow') == '2' && $('#box-1').css('flex-shrink') == '2' && $('#box-1').css('flex-basis') == '150px', '#box-1 元素应有 flex 属性，其值应为 2 2 150px。');" }, { - "text": "The #box-2 element should have the flex property set to a value of 1 1 150px.", - "testString": "assert($('#box-2').css('flex-grow') == '1' && $('#box-2').css('flex-shrink') == '1' && $('#box-2').css('flex-basis') == '150px', 'The #box-2 element should have the flex property set to a value of 1 1 150px.');" + "text": "#box-2 元素应有 flex 属性，其值应为 1 1 150px。", + "testString": "assert($('#box-2').css('flex-grow') == '1' && $('#box-2').css('flex-shrink') == '1' && $('#box-2').css('flex-basis') == '150px', '#box-2 元素应有 flex 属性，其值应为 1 1 150px。');" }, { - "text": "Your code should use the flex property for #box-1 and #box-2.", - "testString": "assert(code.match(/flex:\\s*?\\d\\s+?\\d\\s+?150px;/g).length == 2, 'Your code should use the flex property for #box-1 and #box-2.');" + "text": "应对 #box-1 和 #box-2 使用 flex 属性。", + "testString": "assert(code.match(/flex:\\s*?\\d\\s+?\\d\\s+?150px;/g).length == 2, '应对 #box-1 和 #box-2 使用 flex 属性。');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, + "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -1244,24 +1259,25 @@ "id": "587d78ae367417b2b2512aff", "title": "Use the order Property to Rearrange Items", "description": [ - "The order property is used to tell CSS the order of how flex items appear in the flex container. By default, items will appear in the same order they come in the source HTML. The property takes numbers as values, and negative numbers can be used.", + "order 属性告诉 CSS flex 容器里项目的顺序。 默认情况下，项目排列顺序与源 HTML 文件中顺序相同。这个属性接受数字作为参数，负数可用。", "
", - "Add the CSS property order to both #box-1 and #box-2. Give #box-1 a value of 2 and give #box-2 a value of 1." + "在 #box-1 和 #box-2 添加 CSS 属性 order。#box-1 设为 2，#box-2 设为 1。" ], "tests": [ { - "text": "The #box-1 element should have the order property set to a value of 2.", - "testString": "assert($('#box-1').css('order') == '2', 'The #box-1 element should have the order property set to a value of 2.');" + "text": "#box-1 元素应有 order 属性，其值应为 2。", + "testString": "assert($('#box-1').css('order') == '2', '#box-1 元素应有 order 属性，其值应为 2。');" }, { - "text": "The #box-2 element should have the order property set to a value of 1.", - "testString": "assert($('#box-2').css('order') == '1', 'The #box-2 element should have the order property set to a value of 1.');" + "text": "#box-2 元素应有 order 属性，其值应为 1。", + "testString": "assert($('#box-2').css('order') == '1', '#box-2 元素应有 order 属性，其值应为 1。');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, + "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -1302,25 +1318,26 @@ "id": "587d78af367417b2b2512b00", "title": "Use the align-self Property", "description": [ - "The final property for flex items is align-self. This property allows you to adjust each item's alignment individually, instead of setting them all at once. This is useful since other common adjustment techniques using the CSS properties float, clear, and vertical-align do not work on flex items.", - "align-self accepts the same values as align-items and will override any value set by the align-items property.", + "flex 项目的最后一个属性是 align-self。这个属性允许你调整每个项目自己的对齐方式，而不是一次性设置全部项目。因为 float、clear 和 vertical-align 等调整使用的属性都不能应用在 flex 项目，所以这个属性显得十分有用。", + "align-self 的可能值与 align-items 一样，并且它会覆盖 align-items 的值。", "
", - "Add the CSS property align-self to both #box-1 and #box-2. Give #box-1 a value of center and give #box-2 a value of flex-end." + "在 #box-1 和 #box-2 添加 CSS 属性 align-self。#box-1 设为 center，#box-2 设为 flex-end。" ], "tests": [ { - "text": "The #box-1 element should have the align-self property set to a value of center.", - "testString": "assert($('#box-1').css('align-self') == 'center', 'The #box-1 element should have the align-self property set to a value of center.');" + "text": "#box-1 元素应有 align-self 属性，其值应为 center。", + "testString": "assert($('#box-1').css('align-self') == 'center', '#box-1 元素应有 align-self 属性，其值应为 center。');" }, { - "text": "The #box-2 element should have the align-self property set to a value of flex-end.", - "testString": "assert($('#box-2').css('align-self') == 'flex-end', 'The #box-2 element should have the align-self property set to a value of flex-end.');" + "text": "#box-2 元素应有 align-self 属性，其值应为 flex-end。", + "testString": "assert($('#box-2').css('align-self') == 'flex-end', '#box-2 元素应有 align-self 属性，其值应为 flex-end。');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, + "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -1358,4 +1375,4 @@ } } ] -} \ No newline at end of file +} From 0a96b07aad30e8e7e016b8a1a2570a06664f754f Mon Sep 17 00:00:00 2001 From: ifyour Date: Mon, 23 Jul 2018 21:58:26 +0800 Subject: [PATCH 08/15] translation 2/10 --- .../managing-packages-with-npm.json | 35 ++++++++++--------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/05-apis-and-microservices/managing-packages-with-npm.json b/05-apis-and-microservices/managing-packages-with-npm.json index ce74ecb..8ea6dd2 100644 --- a/05-apis-and-microservices/managing-packages-with-npm.json +++ b/05-apis-and-microservices/managing-packages-with-npm.json @@ -214,22 +214,22 @@ "id": "587d7fb5367417b2b2512c03", "title": "Use the Caret-Character to Use the Latest Minor Version of a Dependency", "description": [ - "Similar to how the tilde (~) we learned about in the last challenge allow npm to install the latest PATCH for a dependency, the caret (^) allows npm to install future updates as well. The difference is that the caret will allow both MINOR updates and PATCHes.", - "At the moment, your current version of moment should be ~2.10.2 which allows npm to install to the latest 2.10.x-version. If we instead were to use the caret (^) as our version prefix, npm would instead be allowed to update to any 2.x.x-version.", - "Example", - "\"some-package-name\": \"^1.3.8\" allows updates to any 1.x.x version.", - "Instructions", - "Use the caret-character (^) to prefix the version of moment in your dependencies and allow npm to update it to any new MINOR release.", - "Note that the version numbers themselves not should be changed." + "和上一个挑战中我们学到的英文波浪号（~）来安装最新的修订版依赖一样，使用脱字符（^）允许 npm 来安装功能更新。它们的不同之处在于：脱字符（^）允许次版本和修订版更新。", + "此刻，你项目中的 moment 依赖包的版本应该是 ~2.10.2，这意味着 npm 可以安装 2.10.x 版的 moment，如果使用脱字符（^）来替换版本号的前缀，那么 npm 可以安装的版本则是 2.x.x。", + "例子", + "\"some-package-name\": \"^1.3.8\" 定义这个包允许使用的版本为 1.x.x。", + "说明", + "使用脱字符（^）为依赖项中的 moment 版本添加前缀，允许 npm 更新依赖包到任意向下兼容的新功能版。", + "请注意，原本的版本号不用更改。" ], "tests": [ { "text": "\"dependencies\" should include \"moment\"", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'moment', '\"dependencies\" does not include \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })" + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'moment', '\"dependencies\" 未包含 \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })" }, { "text": "\"moment\" version should match \"^2.x.x\"", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.match(packJson.dependencies.moment, /^\\^2\\./, 'Wrong version of \"moment\". It should be ^2.10.2'); }, xhr => { throw new Error(xhr.responseText); })" + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.match(packJson.dependencies.moment, /^\\^2\\./, '\"moment\" 的版本号有误，它应该是 ^2.10.2'); }, xhr => { throw new Error(xhr.responseText); })" } ], "solutions": [], @@ -240,17 +240,18 @@ "id": "587d7fb5367417b2b2512c04", "title": "Remove a Package from Your Dependencies", "description": [ - "Now you’ve tested a few ways you can manage dependencies of your project by using the package.json's dependencies-section. You’ve included external packages by adding them to the file and even told npm what types of versions you want by using special characters as the tilde (~) or the caret (^).", - "But what if you want to remove an external package that you no longer need? You might already have guessed it - Just remove the corresponding \"key\": value-pair for that from your dependencies.", - "This same method applies to removing other fields in your package.json as well", - "Instructions", - "Remove the package moment from your dependencies.", - "Make sure you have the right amount of commas after removing it." + "在 package.json 中 dependencies 这一部分，目前尝试了一些管理依赖的方式。你已经添加了一些外部的依赖包到项目中，甚至通过一些特殊的字符比如波浪号（~）或者脱字符（^）来告诉 npm 你想要的版本类型。", + "但是，如果想要删除不需要的依赖包，该怎么办呢？你可能已经猜到了——只需要删除 dependencies 中的键值对就行了。", + "同样的方法也适用于删除 package.json 中的其它字段", + "说明", + "删除 dependencies 中的 moment 依赖包。", + "删除依赖包后，确保有正确数量的逗号。", + "" ], "tests": [ { - "text": "\"dependencies\" should not include \"moment\"", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.notProperty(packJson.dependencies, 'moment', '\"dependencies\" still includes \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })" + "text": "\"dependencies\" 未包含 \"moment\"", + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.notProperty(packJson.dependencies, 'moment', '\"dependencies\" 中任然有 \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })" } ], "solutions": [], From ac7e875f7f0255cfedf8dd0a1e19aee2c659c660 Mon Sep 17 00:00:00 2001 From: ifyour Date: Mon, 23 Jul 2018 21:59:57 +0800 Subject: [PATCH 09/15] fix typo --- 05-apis-and-microservices/managing-packages-with-npm.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/05-apis-and-microservices/managing-packages-with-npm.json b/05-apis-and-microservices/managing-packages-with-npm.json index 8ea6dd2..c2c41d8 100644 --- a/05-apis-and-microservices/managing-packages-with-npm.json +++ b/05-apis-and-microservices/managing-packages-with-npm.json @@ -245,8 +245,7 @@ "同样的方法也适用于删除 package.json 中的其它字段", "说明", "删除 dependencies 中的 moment 依赖包。", - "删除依赖包后，确保有正确数量的逗号。", - "" + "删除依赖包后，确保有正确数量的逗号。" ], "tests": [ { From 1d22a1e917251bec4f373bd1bfb306b6e2270691 Mon Sep 17 00:00:00 2001 From: ifyour Date: Tue, 24 Jul 2018 20:09:43 +0800 Subject: [PATCH 10/15] revise --- .../managing-packages-with-npm.json | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/05-apis-and-microservices/managing-packages-with-npm.json b/05-apis-and-microservices/managing-packages-with-npm.json index c2c41d8..6b6e589 100644 --- a/05-apis-and-microservices/managing-packages-with-npm.json +++ b/05-apis-and-microservices/managing-packages-with-npm.json @@ -189,11 +189,11 @@ "title": "Use the Tilde-Character to Always Use the Latest Patch Version of a Dependency", "description": [ "在最后一个挑战中，我们告诉 npm 只包含特定版本的依赖包。如果想让项目各个部分保持相互兼容，锁定依赖包版本是一个有效的办法。但是大多数情况下，我们并不希望错过依赖项的问题修复，因为它们通常包含重要的安全补丁，而且它们理论上也会兼容我们既有的代码。", - "为了让 npm 依赖项更新到最新的修订版，你可以在依赖包的版本号前加一个英文的波浪号（~）。在 package.json 中，我们当前的 moment 依赖包更新规则是：仅使用特定版本（2.10.2），但我们想用它最新的 2.10.x 版本。", + "为了让 npm 依赖项更新到最新的修订版，你可以在依赖包的版本号前加一个波浪符号（~）。在 package.json 中，我们当前的 moment 依赖包更新规则是：仅使用特定版本（2.10.2），但我们想用它最新的 2.10.x 版本。", "例子", "\"some-package-name\": \"~1.3.8\" 定义这个包允许使用的版本为 1.3.x。", "说明", - "在 dependencies 中，给 moment 的版本号添加英文的波浪号（~）前缀，允许 npm 将其更新为最新的修订版。", + "在 dependencies 中，给 moment 的版本号添加波浪符号（~）前缀，允许 npm 将其更新为最新的修订版。", "请注意，原本的版本号不用更改。" ], "tests": [ @@ -214,12 +214,12 @@ "id": "587d7fb5367417b2b2512c03", "title": "Use the Caret-Character to Use the Latest Minor Version of a Dependency", "description": [ - "和上一个挑战中我们学到的英文波浪号（~）来安装最新的修订版依赖一样，使用脱字符（^）允许 npm 来安装功能更新。它们的不同之处在于：脱字符（^）允许次版本和修订版更新。", - "此刻，你项目中的 moment 依赖包的版本应该是 ~2.10.2，这意味着 npm 可以安装 2.10.x 版的 moment，如果使用脱字符（^）来替换版本号的前缀，那么 npm 可以安装的版本则是 2.x.x。", + "和上一个挑战中我们学到的波浪符号（~）来安装最新的修订版依赖一样，使用插入符号（^）允许 npm 来安装功能更新。它们的不同之处在于：插入符号（^）允许次版本和修订版更新。", + "此刻，你项目中的 moment 依赖包的版本应该是 ~2.10.2，这意味着 npm 可以安装 2.10.x 版的 moment，如果使用插入符号（^）来替换版本号的前缀，那么 npm 可以安装的版本则是 2.x.x。", "例子", "\"some-package-name\": \"^1.3.8\" 定义这个包允许使用的版本为 1.x.x。", "说明", - "使用脱字符（^）为依赖项中的 moment 版本添加前缀，允许 npm 更新依赖包到任意向下兼容的新功能版。", + "使用插入符号（^）为依赖项中的 moment 版本添加前缀，允许 npm 更新依赖包到任意向下兼容的新功能版。", "请注意，原本的版本号不用更改。" ], "tests": [ @@ -240,17 +240,17 @@ "id": "587d7fb5367417b2b2512c04", "title": "Remove a Package from Your Dependencies", "description": [ - "在 package.json 中 dependencies 这一部分，目前尝试了一些管理依赖的方式。你已经添加了一些外部的依赖包到项目中，甚至通过一些特殊的字符比如波浪号（~）或者脱字符（^）来告诉 npm 你想要的版本类型。", + "在 package.json 中 dependencies 这一部分，目前尝试了一些管理依赖的方式。你已经添加了一些外部的依赖包到项目中，甚至通过一些特殊的字符比如波浪符号（~）或者插入符号（^）来告诉 npm 你想要的版本类型。", "但是，如果想要删除不需要的依赖包，该怎么办呢？你可能已经猜到了——只需要删除 dependencies 中的键值对就行了。", "同样的方法也适用于删除 package.json 中的其它字段", "说明", - "删除 dependencies 中的 moment 依赖包。", - "删除依赖包后，确保有正确数量的逗号。" + "删除 moment 依赖包。", + "删除依赖包后，确保没有多余的逗号。" ], "tests": [ { - "text": "\"dependencies\" 未包含 \"moment\"", - "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.notProperty(packJson.dependencies, 'moment', '\"dependencies\" 中任然有 \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })" + "text": "\"dependencies\" 不包含 \"moment\"", + "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.notProperty(packJson.dependencies, 'moment', '\"dependencies\" 中仍然有 \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })" } ], "solutions": [], From 00ab9f9cd941c8378581c35e96e4ecfee404a854 Mon Sep 17 00:00:00 2001 From: DeJavuJo Date: Wed, 25 Jul 2018 09:41:25 +0800 Subject: [PATCH 11/15] =?UTF-8?q?css-flexbox.md=20=E7=BF=BB=E8=AF=91?= =?UTF-8?q?=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 标题等待统一翻译 --- 01-responsive-web-design/css-flexbox.md | 40 ++++++++++++------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/01-responsive-web-design/css-flexbox.md b/01-responsive-web-design/css-flexbox.md index da12c5f..9b5118d 100644 --- a/01-responsive-web-design/css-flexbox.md +++ b/01-responsive-web-design/css-flexbox.md @@ -1,41 +1,41 @@ # Introduction to the CSS Flexbox Challenges # -A website's User Interface ("UI") has two components. First, there are the visual elements, such as colors, fonts, and images. Second, there is the placement or positioning of those elements. In Responsive Web Design, a UI layout must accommodate many different browsers and devices accessing the content. +网页的用户界面（User Interface 缩写 UI）包括两个部分。第一部分是视觉要素，如色彩、字体和图片等。第二部分是这些元素的排列和定位。在响应式网页设计中，UI 布局必须适配不同浏览器和设备。 -CSS3 introduced Flexible Boxes, or flexbox, to create page layouts for a dynamic UI. It is a layout mode that arranges elements in a predictable way for different screen sizes and browsers. While somewhat new, all popular modern browsers support flexbox. This section covers how to use flexbox and the different layout options it offers. +CSS3 引入了 Flexible Box，或者叫 flexbox，它可以为动态 UI 创建页面布局。这种布局可以以一种可预见的方式排列元素，使其适用于不同的屏幕大小和浏览器。虽然这是个新东西，但所有现代浏览器都已经支持 flexbox。这一节将要介绍如何使用 flexbox 及其提供的布局选项。 -# Upcoming Lessons # +# 课程目录 # -Use display: flex to Position Two Boxes +使用 display: flex 定位两个盒子 -Add Flex Superpowers to the Tweet Embed +为嵌入推文添加 Flex 的神奇力量 -Use the flex-direction Property to Make a Row +使用 flex-direction 属性 to Make a Row -Apply the flex-direction Property to Create Rows in the Tweet Embed +Apply the flex-direction 属性 to Create Rows in the 嵌入推文 -Use the flex-direction Property to Make a Column +使用 flex-direction 属性 to Make a Column -Apply the flex-direction Property to Create a Column in the Tweet Embed +Apply the flex-direction 属性 to Create a Column in the 嵌入推文 -Align Elements Using the justify-content Property +Align Elements Using the justify-content 属性 -Use the justify-content Property in the Tweet Embed +使用 justify-content 属性 in the 嵌入推文 -Align Elements Using the align-items Property +Align Elements Using the align-items 属性 -Use the align-items Property in the Tweet Embed +在嵌入推文中使用 align-items 属性 -Use the flex-wrap Property to Wrap a Row or Column +使用 flex-wrap 属性换行 -Use the flex-shrink Property to Shrink Items +使用 flex-shrink 属性压缩项目 -Use the flex-grow Property to Expand Items +使用 flex-grow 属性扩展项目 -Use the flex-basis Property to Set the Initial Size of an Item +使用 flex-basis 属性设置项目原始大小 -Use the flex Shorthand Property +使用 flex 简写属性 -Use the order Property to Rearrange Items +使用 order 属性重排项目 -Use the align-self Property \ No newline at end of file +使用 align-self 属性 From a6f2390191401a50e3f5c6058e6ccbebc2ab13cf Mon Sep 17 00:00:00 2001 From: ifyour Date: Wed, 25 Jul 2018 22:13:18 +0800 Subject: [PATCH 12/15] translate the document --- .../managing-packages-with-npm.md | 33 +++++++++---------- 1 file changed, 16 insertions(+), 17 deletions(-) diff --git a/05-apis-and-microservices/managing-packages-with-npm.md b/05-apis-and-microservices/managing-packages-with-npm.md index 24a7097..3f9381f 100644 --- a/05-apis-and-microservices/managing-packages-with-npm.md +++ b/05-apis-and-microservices/managing-packages-with-npm.md @@ -1,36 +1,35 @@ # Introduction to the Managing Packages with npm Challenges # -The Node Package Manager (npm) is a command-line tool used by developers to share and control modules (or packages) of JavaScript code written for use with Node.js. +Node 包管理器（npm）是一种命令行工具，开发人员使用它来分享和管理 Node.js 编写的 JavaScript 模块（包）。 -When starting a new project, npm generates a package.json file. This file lists the package dependencies for your project. Since npm packages are regularly updated, the package.json file allows you to set specific version numbers for each dependency. This ensures that updates to a package don't break your project. +启动新项目时，npm 会生成一个 package.json 文件。此文件列出了项目的所有依赖。因为依赖包是有规律可循的，package.json 文件允许为每个依赖项设置特定的版本号。以确保这些依赖包更新时不会破坏你的项目。 -npm saves packages in a folder named nodemodules. These packages can be installed in two ways: +npm 会保存依赖包放入叫 nodemodules 的文件夹内。这些依赖包可以通过两种方式安装： -globally in a root nodemodules folder, accessible by all projects. -locally within a project's own node_modules folder, accessible only to that project. +全局安装的依赖包会放在根目录下叫 nodemodules 的文件夹内，以供所有项目使用 +本地安装的依赖包会放在项目内叫 node_modules 的文件夹内，只可以在当前项目使用 -Most developers prefer to install packages local to each project to create a separation between the dependencies of different projects. Working on these challenges will involve you writing your code on Glitch on our starter project. After completing each challenge you can copy your public Glitch url (to the homepage of your app) into the challenge screen to test it! Optionally you may choose to write your project on another platform but it must be publicly visible for our testing. -Start this project on Glitch using this link or clone this repository on GitHub! If you use Glitch, remember to save the link to your project somewhere safe! +为了能隔离不同项目之间的依赖，大多数开发者更喜欢在本地项目内安装依赖包。你需要在 Glitch 里启动这个项目并编写相应的代码来应对这些挑战。完成每个挑战后，你可以将 Glitch 地址公开（到你的应用主页）并复制它们，放到挑战题中进行测试！你可以选择另外的平台编写项目代码，但是必须设置为可公开访问，以便我们进行测试。可以使用这个链接在 Glitch 上开始项目，或者克隆这个仓库链接来开始项目！如果你使用 Glitch，请记住将项目链接保存到安全的地方！ # Upcoming Lessons # -How to Use package.json, the Core of Any Node.js Project or npm Package +如何在 Node.js 项目或者 npm 包中使用 package.json -Add a Description to Your package.json +在 package.json 中添加描述信息 -Add Keywords to Your package.json +在 package.json 中添加关键词 -Add a License to Your package.json +在 package.json 中添加许可证 -Add a Version to Your package.json +在 package.json 中添加版本号 -Expand Your Project with External Packages from npm +在项目中通过 npm 来安装外部依赖包 -Manage npm Dependencies By Understanding Semantic Versioning +使用语义化版本控制规范（SemVer）来管理 npm 依赖 -Use the Tilde-Character to Always Use the Latest Patch Version of a Dependency +使用波浪符号（~）将依赖包更新为最新的修订版 -Use the Caret-Character to Use the Latest Minor Version of a Dependency +使用插入符号（^）安装任意向下兼容的新功能版依赖包 -Remove a Package from Your Dependencies \ No newline at end of file +在依赖项中移除一个包 \ No newline at end of file From 5f43ac4fa7b4fcd8e08ad90430bb5c786900d079 Mon Sep 17 00:00:00 2001 From: ifyour Date: Wed, 25 Jul 2018 22:17:07 +0800 Subject: [PATCH 13/15] fix typo --- 05-apis-and-microservices/managing-packages-with-npm.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/05-apis-and-microservices/managing-packages-with-npm.md b/05-apis-and-microservices/managing-packages-with-npm.md index 3f9381f..c992d6a 100644 --- a/05-apis-and-microservices/managing-packages-with-npm.md +++ b/05-apis-and-microservices/managing-packages-with-npm.md @@ -10,7 +10,7 @@ npm 会保存依赖包放入叫 nodemodules 的文件夹内。这些依赖包可 全局安装的依赖包会放在根目录下叫 nodemodules 的文件夹内，以供所有项目使用 本地安装的依赖包会放在项目内叫 node_modules 的文件夹内，只可以在当前项目使用 -为了能隔离不同项目之间的依赖，大多数开发者更喜欢在本地项目内安装依赖包。你需要在 Glitch 里启动这个项目并编写相应的代码来应对这些挑战。完成每个挑战后，你可以将 Glitch 地址公开（到你的应用主页）并复制它们，放到挑战题中进行测试！你可以选择另外的平台编写项目代码，但是必须设置为可公开访问，以便我们进行测试。可以使用这个链接在 Glitch 上开始项目，或者克隆这个仓库链接来开始项目！如果你使用 Glitch，请记住将项目链接保存到安全的地方！ +为了能隔离不同项目之间的依赖，大多数开发者更喜欢在本地项目内安装依赖包。你需要在 Glitch 里启动这个项目并编写相应的代码来应对这些挑战。完成每个挑战后，你可以将 Glitch 地址公开（到你的应用主页）并复制它们，放到挑战题中进行测试！你可以选择另外的平台编写项目代码，但是必须设置为可公开访问，以便我们进行测试。可以使用这个链接在 Glitch 上开始项目，或者克隆这个 GitHub 仓库链接来开始项目！如果你使用 Glitch，请记住将项目链接保存到安全的地方！ # Upcoming Lessons # From b98c12d8bf79f51573b0d0900dfef4e03df389ef Mon Sep 17 00:00:00 2001 From: ifyour Date: Thu, 26 Jul 2018 21:54:13 +0800 Subject: [PATCH 14/15] translate the title --- 05-apis-and-microservices/managing-packages-with-npm.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/05-apis-and-microservices/managing-packages-with-npm.md b/05-apis-and-microservices/managing-packages-with-npm.md index c992d6a..fb2bb1d 100644 --- a/05-apis-and-microservices/managing-packages-with-npm.md +++ b/05-apis-and-microservices/managing-packages-with-npm.md @@ -1,4 +1,4 @@ -# Introduction to the Managing Packages with npm Challenges # +# 挑战简介——使用 npm 管理包 # Node 包管理器（npm）是一种命令行工具，开发人员使用它来分享和管理 Node.js 编写的 JavaScript 模块（包）。 @@ -12,7 +12,7 @@ npm 会保存依赖包放入叫 nodemodules 的文件夹内。这些依赖包可 为了能隔离不同项目之间的依赖，大多数开发者更喜欢在本地项目内安装依赖包。你需要在 Glitch 里启动这个项目并编写相应的代码来应对这些挑战。完成每个挑战后，你可以将 Glitch 地址公开（到你的应用主页）并复制它们，放到挑战题中进行测试！你可以选择另外的平台编写项目代码，但是必须设置为可公开访问，以便我们进行测试。可以使用这个链接在 Glitch 上开始项目，或者克隆这个 GitHub 仓库链接来开始项目！如果你使用 Glitch，请记住将项目链接保存到安全的地方！ -# Upcoming Lessons # +# 课程目录 # 如何在 Node.js 项目或者 npm 包中使用 package.json From 66cc74838b2f7bb1deef1e5760ccaf6187fad328 Mon Sep 17 00:00:00 2001 From: ssshooter <472356884@qq.com> Date: Sat, 28 Jul 2018 11:12:25 +0800 Subject: [PATCH 15/15] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E5=BB=BA=E8=AE=AE?= =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=BF=BB=E8=AF=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 01-responsive-web-design/css-flexbox.json | 265 ++++++++++------------ 1 file changed, 124 insertions(+), 141 deletions(-) diff --git a/01-responsive-web-design/css-flexbox.json b/01-responsive-web-design/css-flexbox.json index 8f66dc6..175f4b1 100644 --- a/01-responsive-web-design/css-flexbox.json +++ b/01-responsive-web-design/css-flexbox.json @@ -8,22 +8,21 @@ "id": "587d78ab367417b2b2512af0", "title": "Use display: flex to Position Two Boxes", "description": [ - "这节会使用另一个挑战方法为你介绍 CSS 弹性盒子。挑战会先解释理论，然后动手做一个弹性盒子布局的简单的推文组件。" , - "给一个元素赋予 CSS 属性 display: flex;，你就可以使用其他 flex 属性构建响应式页面了。", + "这节会使用一种不同的挑战方式来学习一下如何更灵活地使用 CSS 布局元素。首先，我们会先用一个挑战解释原理，然后使用“弹性盒子”（flexbox）调整一个推文组件的样式来完成挑战。" , + "只要在一个元素的 CSS 中添加display: flex;，就可以使用其他 flex 属性来构建响应式页面了。", "
", - "为 #box-container 添加 display 属性，设置为 flex。" + "为#box-container添加display属性，设置其值为 flex。" ], "tests": [ { - "text": "#box-container 应有 display 属性，其值应为 flex。", - "testString": "assert($('#box-container').css('display') == 'flex', '#box-container 应有 display 属性，其值应为 flex。');" + "text": "#box-container应有display属性，其值应为 flex。", + "testString": "assert($('#box-container').css('display') == 'flex', '#box-container应有display属性，其值应为 flex。');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, - "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -64,46 +63,45 @@ "id": "587d78ab367417b2b2512af1", "title": "Add Flex Superpowers to the Tweet Embed", "description": [ - "我们以右边的内嵌推文为基础开始实践。一些元素换一个布局方式或许更好看。上一个挑战演示了 display: flex，现在你需要把它添加到内嵌推文的多个组件来调整它们的位置。", + "我们以右边的内嵌推文为基础开始实践。一些元素换一个布局方式或许更好看。上一个挑战演示了display: flex，现在你需要把它添加到推文内嵌的多个组件中，调整它们的位置。", "
", - "为下列项目添加 CSS 属性 display: flex —— 注意，选择器已在 CSS 中准备好：", - "header、header 的 .profile-name、header 的 .follow-btn、header 的 h3 和 h4、footer 以及 footer 的 .stats。" + "为下列项目添加 CSS 属性display: flex—— 注意，选择器已在 CSS 中给出：", + "header、header 的.profile-name、header 的.follow-btn、header 的h3和h4、footer以及 footer 的.stats。" ], "tests": [ { - "text": "header 的 display 属性应为 flex。", - "testString": "assert($('header').css('display') == 'flex', 'header 的 display 属性应为 flex。');" + "text": "header的display属性应为 flex。", + "testString": "assert($('header').css('display') == 'flex', 'header的display属性应为 flex。');" }, { - "text": "footer 的 display 属性应为 flex。", - "testString": "assert($('footer').css('display') == 'flex', 'footer 的 display 属性应为 flex。');" + "text": "footer的display属性应为 flex。", + "testString": "assert($('footer').css('display') == 'flex', 'footer的display属性应为 flex。');" }, { - "text": "h3 的 display 属性应为 flex。", - "testString": "assert($('h3').css('display') == 'flex', 'h3 的 display 属性应为 flex。');" + "text": "h3的display属性应为 flex。", + "testString": "assert($('h3').css('display') == 'flex', 'h3的display属性应为 flex。');" }, { - "text": "h4 的 display 属性应为 flex。", - "testString": "assert($('h4').css('display') == 'flex', 'h4 的 display 属性应为 flex。');" + "text": "h4的display属性应为 flex。", + "testString": "assert($('h4').css('display') == 'flex', 'h4的display属性应为 flex。');" }, { - "text": ".profile-name 的 display 属性应为 flex。", - "testString": "assert($('.profile-name').css('display') == 'flex', '.profile-name 的 display 属性应为 flex。');" + "text": ".profile-name的display属性应为 flex。", + "testString": "assert($('.profile-name').css('display') == 'flex', '.profile-name的display属性应为 flex。');" }, { - "text": ".follow-btn 的 display 属性应为 flex。", - "testString": "assert($('.follow-btn').css('display') == 'flex', '.follow-btn 的 display 属性应为 flex。');" + "text": ".follow-btn的display属性应为 flex。", + "testString": "assert($('.follow-btn').css('display') == 'flex', '.follow-btn的display属性应为 flex。');" }, { - "text": ".stats 的 display 属性应为 flex。", - "testString": "assert($('.stats').css('display') == 'flex', '.stats 的 display 属性应为 flex。');" + "text": ".stats的display属性应为 flex。", + "testString": "assert($('.stats').css('display') == 'flex', '.stats的display属性应为 flex。');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, - "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -209,23 +207,22 @@ "id": "587d78ab367417b2b2512af2", "title": "Use the flex-direction Property to Make a Row", "description": [ - "添加了 display: flex 的元素会成为 flex 容器。只要把 flex-direction 属性添加到父元素，并设置其为 row 或 column，便可以轻易横或竖排列它的子元素。设为 row 可以让子元素水平排列，column 可以让子元素垂直排列。", - "flex-direction 的其他选项还有 row-reverse 和 column-reverse。", - "注意
flex-direction 的默认值为 row。", + "添加了display: flex的元素会成为 flex 容器。只要把flex-direction属性添加到父元素，并设置其为 row 或 column 即可轻易横或竖排列它的子元素。设为 row 可以让子元素水平排列，column 可以让子元素垂直排列。", + "flex-direction的其他可选值还有 row-reverse 和 column-reverse。", + "注意
flex-direction的默认值为 row。", "
", - "为 #box-container 添加 CSS 属性 flex-direction，其值设为 row-reverse。" + "为#box-container添加 CSS 属性flex-direction，其值设为 row-reverse。" ], "tests": [ { - "text": "#box-container 应有 flex-direction 属性，其值应为 row-reverse。", - "testString": "assert($('#box-container').css('flex-direction') == 'row-reverse', '#box-container 应有 flex-direction 属性，其值应为 row-reverse。');" + "text": "#box-container应有flex-direction属性，其值应为 row-reverse。", + "testString": "assert($('#box-container').css('flex-direction') == 'row-reverse', '#box-container应有flex-direction属性，其值应为 row-reverse。');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, - "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -265,25 +262,24 @@ "id": "587d78ab367417b2b2512af3", "title": "Apply the flex-direction Property to Create Rows in the Tweet Embed", "description": [ - "内嵌推文样例中的 header 和 footer 有自己的子元素，使用 flex-direction 属性可以把这些子元素排列成一行。这个属性告诉 CSS 需要将这个元素的子元素水平排列。", + "内嵌推文样例中的header和footer有自己的子元素，使用flex-direction属性可以把这些子元素排列成一行。这个属性告诉 CSS 需要将这个元素的子元素水平排列。", "
", - "为 header 和 footer 添加 CSS 属性 flex-direction 并把值设为 row。" + "为header和footer添加 CSS 属性flex-direction并把值设为 row。" ], "tests": [ { - "text": "header 应有 flex-direction 属性，其值应为 row。", - "testString": "assert(code.match(/header\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-direction:\\s*?row;/g), 'header 应有 flex-direction 属性，其值应为 row。');" + "text": "header应有flex-direction属性，其值应为 row。", + "testString": "assert(code.match(/header\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-direction:\\s*?row;/g), 'header应有flex-direction属性，其值应为 row。');" }, { - "text": "footer 应有 flex-direction 属性，其值应为 row。", - "testString": "assert(code.match(/footer\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-direction:\\s*?row;/g), 'footer 应有 flex-direction 属性，其值应为 row。');" + "text": "footer应有flex-direction属性，其值应为 row。", + "testString": "assert(code.match(/footer\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-direction:\\s*?row;/g), 'footer应有flex-direction属性，其值应为 row。');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, - "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -391,21 +387,20 @@ "id": "587d78ac367417b2b2512af4", "title": "Use the flex-direction Property to Make a Column", "description": [ - "之前两项挑战把 flex-direction 设为 row。这个属性还能创建一个列，让子元素垂直层叠在 flex 容器中。", + "之前两项挑战把flex-direction设为 row。这个属性还能创建一个列，让子元素垂直排列在 flex 容器中。", "
", - "添加 CSS 属性 flex-direction 到 #box-container 元素，赋值为 column。" + "给#box-container元素添加 CSS 属性flex-direction，赋值为 column。" ], "tests": [ { - "text": "#box-container 应有 flex-direction 属性，其值应为 column。", - "testString": "assert($('#box-container').css('flex-direction') == 'column', '#box-container 应有 flex-direction 属性，其值应为 column。');" + "text": "#box-container应有flex-direction属性，其值应为 column。", + "testString": "assert($('#box-container').css('flex-direction') == 'column', '#box-container应有flex-direction属性，其值应为 column。');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, - "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -445,21 +440,20 @@ "id": "587d78ac367417b2b2512af5", "title": "Apply the flex-direction Property to Create a Column in the Tweet Embed", "description": [ - "上面，内嵌推文的 header 和 footer 把 flex-direction 属性设为 row。相似地， .profile-name 里的元素或许竖着排列会好看一点。", + "上面，内嵌推文的header和footer把flex-direction属性设为 row。相似地，.profile-name里的元素或许竖着排列会好看一点。", "
", - "在 header 的 .profile-name 元素添加 CSS 属性 flex-direction，将其值设为 column。" + "在 header 的.profile-name元素添加 CSS 属性flex-direction，将其值设为 column。" ], "tests": [ { - "text": ".profile-name 应有 flex-direction 属性，其值应为 column。", - "testString": "assert($('.profile-name').css('flex-direction') == 'column', '.profile-name 应有 flex-direction 属性，其值应为 column。');" + "text": ".profile-name应有flex-direction属性，其值应为 column。", + "testString": "assert($('.profile-name').css('flex-direction') == 'column', '.profile-name应有flex-direction属性，其值应为 column。');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, - "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -564,26 +558,25 @@ "id": "587d78ac367417b2b2512af6", "title": "Align Elements Using the justify-content Property", "description": [ - "flex 容器里的 flex 项目有时不能充满整个容器，所以我们需要告诉 CSS 如何以特定方案排列和调整 flex 项目。幸运的是，我们有 justify-content 属性处理这个问题。但在介绍 justify-content 的选项之前，我们要先理解一些重要术语。", + "flex 容器里的 flex 子元素有时不能充满整个容器，所以我们需要告诉 CSS 如何以特定方案排列和调整 flex 子元素。幸运的是，我们有justify-content属性处理这个问题。但在介绍justify-content的可选值之前，我们要先理解一些重要术语。", "这张图片的元素横着排列，很好地描述了下面的概念。", - "回忆一下，把 flex 容器设为一个行，它的子元素会从左到右逐个排列，把 flex 容器设为一个列，它的子元素会从上到下垂直叠在一起。子元素排列的方向被称为 main axis（主轴）。对于行，主轴水平贯穿每一个项目；对于列，主轴垂直贯穿每一个项目。", - "这是几个 flex 项目在主轴排列方式的选项：其中一个很常用的选项是 justify-content: center;，可以让 flex 项目排列在 flex 容器中间。其他选项还包括：", - "
  • flex-start：从 flex 容器的前端开始排列项目。对行来说是把项目都靠左放，对于列是把项目都靠顶部放。
  • flex-end：从 flex 容器的后端开始排列项目。对行来说是把项目都靠右放，对于列是把项目都靠底部放。
  • space-between：项目间保留一定空位地在主轴排列。第一个和最后一个项目会被挤到容器边沿。例如，在行中第一个项目会紧贴着容器左侧，最后一个项目会紧贴着容器右侧，然后其他项目均匀排布。
  • space-around：与 space-between 相似，但头尾两个项目不会紧贴容器边缘，空间会均匀分布在所有项目两边
", + "回忆一下，把 flex 容器设为一个行，它的子元素会从左到右逐个排列，把 flex 容器设为一个列，它的子元素会从上到下逐个排列。子元素排列的方向被称为 main axis（主轴）。对于行，主轴水平贯穿每一个项目；对于列，主轴垂直贯穿每一个项目。", + "关于 flex 子元素在主轴排列方式，可以选择以下值：其中一个很常用的是justify-content: center;，可以让 flex 子元素排列在 flex 容器中间。其他可选值还有：", + "
  • flex-start：从 flex 容器的前端开始排列项目。对行来说是把项目都靠左放，对于列是把项目都靠顶部放。
  • flex-end：从 flex 容器的后端开始排列项目。对行来说是把项目都靠右放，对于列是把项目都靠底部放。
  • space-between：项目间保留一定间距地在主轴排列。第一个和最后一个项目会被挤到容器边沿。例如，在行中第一个项目会紧贴着容器左侧，最后一个项目会紧贴着容器右侧，然后其他项目均匀排布。
  • space-around：与space-between相似，但头尾两个项目不会紧贴容器边缘，空间会均匀分布在所有项目两边
", "
", - "这个例子可以帮助你理解这个属性，在 #box-container 元素添加 CSS 属性 justify-content，其值为 center。", - "Bonus
在编辑器里试试 justify-content 的其他选项，看看它们之间的区别。但要通过挑战必须把值设为 center 哦。" + "这个例子可以帮助你理解这个属性，在#box-container元素添加 CSS 属性justify-content，其值为 center。", + "提示：
在编辑器里试试justify-content的其他可用值，看看它们之间的区别。但要通过挑战，你必须把值设为 center." ], "tests": [ { - "text": "#box-container 应有 justify-content 属性，其值应为 center。", - "testString": "assert($('#box-container').css('justify-content') == 'center', '#box-container 应有 justify-content 属性，其值应为 center。');" + "text": "#box-container应有justify-content属性，其值应为 center。", + "testString": "assert($('#box-container').css('justify-content') == 'center', '#box-container应有justify-content属性，其值应为 center。');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, - "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -624,21 +617,20 @@ "id": "587d78ac367417b2b2512af7", "title": "Use the justify-content Property in the Tweet Embed", "description": [ - "上一项挑战展示了 justify-content 属性的作用。对于内嵌推文，可以应用在 .profile-name，以对齐它的子元素。", + "上一项挑战展示了justify-content属性的作用。如果我们想对齐推文内的子元素，可以把justify-content应用在.profile-name上。", "
", - "在 header 的 .profile-name 元素添加 CSS 属性 justify-content ，把它的值设为上面挑战提到的任意选项。" + "在 header 的.profile-name元素添加 CSS 属性justify-content，把它的值设为上面挑战提到的任意可用值。" ], "tests": [ { - "text": ".profile-name 元素的 justify-content 属性可选以下值:center、flex-start、flex-end、space-between、space-around。", - "testString": "assert(code.match(/header\\s.profile-name\\s*{\\s*?.*?\\s*?.*?\\s*?\\s*?.*?\\s*?justify-content\\s*:\\s*(center|flex-start|flex-end|space-between|space-around)\\s*;/g), '.profile-name 元素的 justify-content 属性可选以下值:center、flex-start、flex-end、space-between、space-around。');" + "text": ".profile-name元素的justify-content属性可选以下值：center、flex-start、flex-end、space-between、space-around。", + "testString": "assert(code.match(/header\\s.profile-name\\s*{\\s*?.*?\\s*?.*?\\s*?\\s*?.*?\\s*?justify-content\\s*:\\s*(center|flex-start|flex-end|space-between|space-around)\\s*;/g), '.profile-name元素的justify-content属性可选以下值：center、flex-start、flex-end、space-between、space-around。');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, - "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -744,26 +736,25 @@ "id": "587d78ad367417b2b2512af8", "title": "Align Elements Using the align-items Property", "description": [ - "align-items 属性与 justify-content 类似。回忆一下，justify-content 属性使 flex 项目沿主轴排列。行的主轴是水平线，列的主轴是垂直线。", - "Flex 容器中，与主轴垂直的，被称为 cross axis（交叉轴）。行的交叉轴是垂直的，列的交叉轴是水平的。", - "CSS 提供了 align-items 属性，可以用于在交叉轴调整 flex 项目。对于行，它规定了项目在容器中应该靠上还是靠下，而对于列，就是靠左或靠右。", - "align-items 的可选值包括：", - "
  • flex-start：从 flex 容器的前端开始排列项目。对行来说是把项目都靠顶部放，对于列是把项目都靠左放。
  • flex-end：从 flex 容器的后端开始排列项目。对行来说是把项目都靠底部放，对于列是把项目都靠右放。
  • center：把项目的位置调整到中间。对于行，垂直居中（项目上下方空间相等）。对于列，水平居中（项目左右方空间相等）。
  • stretch：拉伸项目，填满 flex 容器。例如，排成行的项目从容器顶部拉伸到底部。
  • baseline：基线对其地排列。基线是字体相关的概念，可以认为字体坐落在基线上。
", + "align-items属性与justify-content类似。回忆一下，justify-content属性使 flex 子元素沿主轴排列。行的主轴是水平线，列的主轴是垂直线。", + "Flex 容器中，与主轴垂直的叫做 cross axis（交叉轴）。行的交叉轴是垂直的，列的交叉轴是水平的。", + "CSS 提供了align-items属性，可以用于在交叉轴调整 flex 子元素。对于行，它规定了项目在容器中应该靠上还是靠下，而对于列，就是靠左或靠右。", + "align-items的可选值包括：", + "
  • flex-start：从 flex 容器的前端开始排列项目。对行来说是把项目都靠顶部放，对于列是把项目都靠左放。
  • flex-end：从 flex 容器的后端开始排列项目。对行来说是把项目都靠底部放，对于列是把项目都靠右放。
  • center：把项目的位置调整到中间。对于行，垂直居中（项目上下方空间相等）。对于列，水平居中（项目左右方空间相等）。
  • stretch：拉伸项目，填满 flex 容器。例如，排成行的项目从容器顶部拉伸到底部。
  • baseline：基线对齐地排列。基线是字体相关的概念，可以认为字体坐落在基线上。
", "
", - "这个例子可以帮助你理解这个属性，在 #box-container 添加 CSS 属性 align-items 并将值设为 center。", - "Bonus
在编辑器里试试 align-items 的其他选项，看看它们之间的区别。但要通过挑战必须把值设为 center 哦。" + "这个例子可以帮助你理解这个属性，在#box-container添加 CSS 属性align-items并将值设为 center。", + "提示：
在编辑器里试试align-items的其他可用值，看看它们之间的区别。但要通过挑战，你必须把值设为 center。" ], "tests": [ { - "text": "#box-container 元素应有 align-items 属性，其值应为 center。", - "testString": "assert($('#box-container').css('align-items') == 'center', '#box-container 元素应有 align-items 属性，其值应为 center。');" + "text": "#box-container元素应有align-items属性，其值应为 center。", + "testString": "assert($('#box-container').css('align-items') == 'center', '#box-container元素应有align-items属性，其值应为 center。');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, - "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -804,21 +795,20 @@ "id": "587d78ad367417b2b2512af9", "title": "Use the align-items Property in the Tweet Embed", "description": [ - "上一个挑战介绍了 align-items 并给出了例子。这个属性可以应用在不少元素上，调整它们的子元素的位置。", + "上一个挑战介绍了align-items并给出了例子。这个属性可以应用在不少元素上，调整它们的子元素的位置。", "
", - "在 header 的 .follow-btn 添加 CSS 属性 align-items，把值设为 center。" + "在 header 的.follow-btn添加 CSS 属性align-items，把值设为 center。" ], "tests": [ { - "text": ".follow-btn 应有 align-items 属性，其值应为 center.", - "testString": "assert($('.follow-btn').css('align-items') == 'center', '.follow-btn 应有 align-items 属性，其值应为 center.');" + "text": ".follow-btn应有align-items属性，其值应为 center.", + "testString": "assert($('.follow-btn').css('align-items') == 'center', '.follow-btn应有align-items属性，其值应为 center.');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, - "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -926,24 +916,23 @@ "id": "587d78ad367417b2b2512afa", "title": "Use the flex-wrap Property to Wrap a Row or Column", "description": [ - "CSS flexbox 有一个把 flex 项目拆分为多行（或列）的特性。默认情况下，flex 容器会调整项目大小，把它们都塞到一起。如果是行的话，所有项目都会在一条直线上。", - "不过，使用 flex-wrap 属性可以使项目换行。这意味着多出来的项目会被移到新的行或列。换行发生的断点由项目和容器的大小决定。", - "CSS 还有关于换行方向的选项：", - "
  • nowrap：默认选项，不换行。
  • wrap：行从上到下排，列从左到又排。
  • wrap-reverse：行从下到上排，列从右到左排。
", + "CSS flexbox 有一个把 flex 子元素拆分为多行（或多列）的特性。默认情况下，flex 容器会调整项目大小，把它们都塞到一起。如果是行的话，所有项目都会在一条直线上。", + "不过，使用flex-wrap属性可以使项目换行。这意味着多出来的项目会被移到新的行或列。换行发生的断点由项目和容器的大小决定。", + "换行方向的可选值有这些：", + "
  • nowrap：默认值，不换行。
  • wrap：行从上到下排，列从左到又排。
  • wrap-reverse：行从下到上排，列从右到左排。
", "
", - "现在的布局一行里面元素太多了，在 #box-container 元素添加 CSS 属性 flex-wrap，把值设为 wrap。" + "现在的布局一行里面元素太多了，在#box-container元素添加 CSS 属性flex-wrap，把值设为 wrap。" ], "tests": [ { - "text": "#box-container 元素应有 flex-wrap 属性，其值应为 wrap。", - "testString": "assert($('#box-container').css('flex-wrap') == 'wrap', '#box-container 元素应有 flex-wrap 属性，其值为 wrap。');" + "text": "#box-container元素应有flex-wrap属性，其值应为 wrap。", + "testString": "assert($('#box-container').css('flex-wrap') == 'wrap', '#box-container元素应有flex-wrap属性，其值为 wrap。');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, - "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -1008,27 +997,26 @@ "id": "587d78ad367417b2b2512afb", "title": "Use the flex-shrink Property to Shrink Items", "description": [ - "目前为止，挑战里的提到的属性都应用于 flex 容器（flex 项目的父元素）。除此之外，flex 项目也有很多实用属性。", - "首先介绍的是 flex-shrink 属性。使用之后，如果 flex 容器太小，该项目会自动缩小。当容器的宽度小于里面所有项目的宽度，项目就会自动压缩。", - "flex-shrink 属性接受 number 类型的值。数值越大，与其他项目相比会被压缩得更厉害。例如，如果一个项目的 flex-shrink 为 1 ，另一个项目 flex-shrink 为 3，那么 3 的那个与另一个相比会受到 3 倍压缩。", + "目前为止，挑战里的提到的属性都应用于 flex 容器（flex 子元素的父元素）。除此之外，flex 子元素也有很多实用属性。", + "首先介绍的是flex-shrink属性。使用之后，如果 flex 容器太小，该项目会自动缩小。当容器的宽度小于里面所有项目的宽度，项目就会自动压缩。", + "flex-shrink属性接受 number 类型的值。数值越大，与其他项目相比会被压缩得更厉害。例如，如果一个项目的flex-shrink为 1 ，另一个项目flex-shrink为 3，那么 3 的那个与另一个相比会受到 3 倍压缩。", "
", - "为 #box-1 和 #box-2 添加 CSS 属性 flex-shrink，#box-1 的值设为 1， and #box-2 的值设为 2。" + "为#box-1和#box-2添加 CSS 属性flex-shrink，#box-1的值设为 1，#box-2的值设为 2。" ], "tests": [ { - "text": "#box-1 元素应有 flex-shrink 属性，其值应为 1.", - "testString": "assert($('#box-1').css('flex-shrink') == '1', '#box-1 元素应有 flex-shrink 属性，其值应为 1.');" + "text": "#box-1元素应有flex-shrink属性，其值应为 1.", + "testString": "assert($('#box-1').css('flex-shrink') == '1', '#box-1元素应有flex-shrink属性，其值应为 1.');" }, { - "text": "#box-2 元素应有 flex-shrink 属性，其值应为 2.", - "testString": "assert($('#box-2').css('flex-shrink') == '2', '#box-2 元素应有 flex-shrink 属性，其值应为 2.');" + "text": "#box-2元素应有flex-shrink属性，其值应为 2.", + "testString": "assert($('#box-2').css('flex-shrink') == '2', '#box-2元素应有flex-shrink属性，其值应为 2.');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, - "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -1069,26 +1057,25 @@ "id": "587d78ae367417b2b2512afc", "title": "Use the flex-grow Property to Expand Items", "description": [ - "与 flex-shrink 相对的是 flex-grow。回忆 flex-shrink 在容器太小时作控制，flex-grow 属性是在容器太大时作控制.", - "例子与上一个挑战相似，如果一个项目 flex-grow 属性的值为 1，另一个 flex-grow 为 3，那么 3 的会比 1 的扩大三倍。", + "与flex-shrink相对的是flex-grow。你应该还记得，flex-shrink会在容器太小时对元素作出调整。相应地，flex-grow会在容器太大时对元素作出调整。", + "例子与上一个挑战相似，如果一个项目flex-grow属性的值为 1，另一个flex-grow为 3，那么 3 的会比 1 的扩大三倍。", "
", - "为 #box-1 和 #box-2 添加 CSS 属性 flex-grow，#box-1 的值设为 1， and #box-2 的值设为 2。" + "为#box-1和#box-2添加 CSS 属性flex-grow，#box-1的值设为 1，#box-2的值设为 2。" ], "tests": [ { - "text": "#box-1 元素应有 flex-grow 属性，其值应为 1。", - "testString": "assert($('#box-1').css('flex-grow') == '1', '#box-1 元素应有 flex-grow 属性，其值应为 1。');" + "text": "#box-1元素应有flex-grow属性，其值应为 1。", + "testString": "assert($('#box-1').css('flex-grow') == '1', '#box-1元素应有flex-grow属性，其值应为 1。');" }, { - "text": "#box-2 元素应有 flex-grow 属性，其值应为 2。", - "testString": "assert($('#box-2').css('flex-grow') == '2', '#box-2 元素应有 flex-grow 属性，其值应为 2。');" + "text": "#box-2元素应有flex-grow属性，其值应为 2。", + "testString": "assert($('#box-2').css('flex-grow') == '2', '#box-2元素应有flex-grow属性，其值应为 2。');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, - "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -1128,34 +1115,33 @@ "id": "587d78ae367417b2b2512afd", "title": "Use the flex-basis Property to Set the Initial Size of an Item", "description": [ - "flex-basis 属性指定了项目在 CSS 进行 flex-shrink 或 flex-grow 调整前的初始大小。", - "flex-basis 属性的单位与其他 size 属性一致（px、em、% 等）。如果值为 auto，项目的大小依赖于自身内容。", + "flex-basis属性指定了项目在 CSS 进行flex-shrink或flex-grow调整前的初始大小。", + "flex-basis属性的单位与其他 size 属性一致（px、em、%等）。如果值为auto，项目的大小依赖于自身内容。", "
", - "使用 flex-basis 为盒子设置原始值。在 #box-1 和 #box-2 添加 CSS 属性 flex-basis。设置 #box-1 为 10em，#box-2 为 20em。" + "使用flex-basis为盒子设置原始值。在#box-1和#box-2添加 CSS 属性flex-basis。设置#box-1为10em，#box-2为20em。" ], "tests": [ { - "text": "#box-1 元素应有 flex-basis 属性。", - "testString": "assert($('#box-1').css('flex-basis') != 'auto', '#box-1 元素应有 flex-basis 属性。');" + "text": "#box-1元素应有flex-basis属性。", + "testString": "assert($('#box-1').css('flex-basis') != 'auto', '#box-1元素应有flex-basis属性。');" }, { - "text": "#box-1 的 flex-basis 应为 10em。", - "testString": "assert(code.match(/#box-1\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-basis:\\s*?10em;/g), '#box-1 的 flex-basis 应为 10em。');" + "text": "#box-1的flex-basis应为10em。", + "testString": "assert(code.match(/#box-1\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-basis:\\s*?10em;/g), '#box-1的flex-basis应为10em。');" }, { - "text": "#box-2 元素应有 flex-basis 属性。", - "testString": "assert($('#box-2').css('flex-basis') != 'auto', '#box-2 元素应有 flex-basis 属性。');" + "text": "#box-2元素应有flex-basis属性。", + "testString": "assert($('#box-2').css('flex-basis') != 'auto', '#box-2元素应有flex-basis属性。');" }, { - "text": "#box-2 的 flex-basis 应为 20em。", - "testString": "assert(code.match(/#box-2\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-basis:\\s*?20em;/g), '#box-2 的 flex-basis 应为 20em。');" + "text": "#box-2的flex-basis应为20em。", + "testString": "assert(code.match(/#box-2\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-basis:\\s*?20em;/g), '#box-2的flex-basis应为20em。');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, - "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -1195,32 +1181,31 @@ "id": "587d78ae367417b2b2512afe", "title": "Use the flex Shorthand Property", "description": [ - "上面几个 flex 属性有一个缩写法。flex-grow、flex-shrink 和 flex-basis 属性可以在 flex 中一同设置。", - "例如，flex: 1 0 10px; 会把项目属性设为 flex-grow: 1;、flex-shrink: 0; 以及 flex-basis: 10px;。", - "属性的默认设置是 flex: 0 1 auto;。", + "上面几个 flex 属性有一个简写方式。flex-grow、flex-shrink和flex-basis属性可以在flex中一同设置。", + "例如，flex: 1 0 10px;会把项目属性设为flex-grow: 1;、flex-shrink: 0;以及flex-basis: 10px;。", + "属性的默认设置是flex: 0 1 auto;。", "
", - "在 #box-1 and #box-2 添加 flex 属性。把 #box-1 设置成 flex-grow 为 2，flex-shrink 为 2, flex-basis 为 150px。把 #box-2 设置成 flex-grow 为 1，flex-shrink 为 1，flex-basis 为 150px。", - "上面设置的属性,在容器大于 300px 时，会让 #box-1 填充倍率为 #box-2 的两倍；在容器小于 300px 时，缩小倍率为 #box-2 的两倍。300px 是两个盒子的 flex-basis 的值之和。" + "在#box-1和#box-2添加flex属性。把#box-1设置成flex-grow为 2，flex-shrink为 2，flex-basis为 150px。把#box-2设置成flex-grow为 1，flex-shrink为 1，flex-basis为 150px。", + "上面设置的属性，在容器大于 300px 时，会让#box-1填充倍率为#box-2的两倍；在容器小于 300px 时，缩小倍率为#box-2的两倍。300px 是两个盒子的flex-basis的值之和。" ], "tests": [ { - "text": "#box-1 元素应有 flex 属性，其值应为 2 2 150px。", - "testString": "assert($('#box-1').css('flex-grow') == '2' && $('#box-1').css('flex-shrink') == '2' && $('#box-1').css('flex-basis') == '150px', '#box-1 元素应有 flex 属性，其值应为 2 2 150px。');" + "text": "#box-1元素应有flex属性，其值应为 2 2 150px。", + "testString": "assert($('#box-1').css('flex-grow') == '2' && $('#box-1').css('flex-shrink') == '2' && $('#box-1').css('flex-basis') == '150px', '#box-1元素应有flex属性，其值应为 2 2 150px。');" }, { - "text": "#box-2 元素应有 flex 属性，其值应为 1 1 150px。", - "testString": "assert($('#box-2').css('flex-grow') == '1' && $('#box-2').css('flex-shrink') == '1' && $('#box-2').css('flex-basis') == '150px', '#box-2 元素应有 flex 属性，其值应为 1 1 150px。');" + "text": "#box-2元素应有flex属性，其值应为 1 1 150px。", + "testString": "assert($('#box-2').css('flex-grow') == '1' && $('#box-2').css('flex-shrink') == '1' && $('#box-2').css('flex-basis') == '150px', '#box-2元素应有flex属性，其值应为 1 1 150px。');" }, { - "text": "应对 #box-1 和 #box-2 使用 flex 属性。", - "testString": "assert(code.match(/flex:\\s*?\\d\\s+?\\d\\s+?150px;/g).length == 2, '应对 #box-1 和 #box-2 使用 flex 属性。');" + "text": "应对#box-1和#box-2使用flex属性。", + "testString": "assert(code.match(/flex:\\s*?\\d\\s+?\\d\\s+?150px;/g).length == 2, '应对#box-1和#box-2使用flex属性。');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, - "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -1259,25 +1244,24 @@ "id": "587d78ae367417b2b2512aff", "title": "Use the order Property to Rearrange Items", "description": [ - "order 属性告诉 CSS flex 容器里项目的顺序。 默认情况下，项目排列顺序与源 HTML 文件中顺序相同。这个属性接受数字作为参数，负数可用。", + "order属性告诉 CSS flex 容器里项目的顺序。默认情况下，项目排列顺序与源 HTML 文件中顺序相同。这个属性接受数字作为参数，可以使用负数。", "
", - "在 #box-1 和 #box-2 添加 CSS 属性 order。#box-1 设为 2，#box-2 设为 1。" + "在#box-1和#box-2添加 CSS 属性order。#box-1设为 2，#box-2设为 1。" ], "tests": [ { - "text": "#box-1 元素应有 order 属性，其值应为 2。", - "testString": "assert($('#box-1').css('order') == '2', '#box-1 元素应有 order 属性，其值应为 2。');" + "text": "#box-1元素应有order属性，其值应为 2。", + "testString": "assert($('#box-1').css('order') == '2', '#box-1元素应有order属性，其值应为 2。');" }, { - "text": "#box-2 元素应有 order 属性，其值应为 1。", - "testString": "assert($('#box-2').css('order') == '1', '#box-2 元素应有 order 属性，其值应为 1。');" + "text": "#box-2元素应有order属性，其值应为 1。", + "testString": "assert($('#box-2').css('order') == '1', '#box-2元素应有order属性，其值应为 1。');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, - "translations": {}, "files": { "indexhtml": { "key": "indexhtml", @@ -1318,26 +1302,25 @@ "id": "587d78af367417b2b2512b00", "title": "Use the align-self Property", "description": [ - "flex 项目的最后一个属性是 align-self。这个属性允许你调整每个项目自己的对齐方式，而不是一次性设置全部项目。因为 float、clear 和 vertical-align 等调整使用的属性都不能应用在 flex 项目，所以这个属性显得十分有用。", - "align-self 的可能值与 align-items 一样，并且它会覆盖 align-items 的值。", + "flex 子元素的最后一个属性是align-self。这个属性允许你调整每个项目自己的对齐方式，而不是一次性设置全部项目。因为float、clear和vertical-align等调整使用的属性都不能应用在 flex 子元素，所以这个属性显得十分有用。", + "align-self的允许值与align-items一样，并且它会覆盖align-items的值。", "
", - "在 #box-1 和 #box-2 添加 CSS 属性 align-self。#box-1 设为 center，#box-2 设为 flex-end。" + "在#box-1和#box-2添加 CSS 属性align-self。#box-1设为 center，#box-2设为 flex-end。" ], "tests": [ { - "text": "#box-1 元素应有 align-self 属性，其值应为 center。", - "testString": "assert($('#box-1').css('align-self') == 'center', '#box-1 元素应有 align-self 属性，其值应为 center。');" + "text": "#box-1元素应有align-self属性，其值应为 center。", + "testString": "assert($('#box-1').css('align-self') == 'center', '#box-1元素应有align-self属性，其值应为 center。');" }, { - "text": "#box-2 元素应有 align-self 属性，其值应为 flex-end。", - "testString": "assert($('#box-2').css('align-self') == 'flex-end', '#box-2 元素应有 align-self 属性，其值应为 flex-end。');" + "text": "#box-2元素应有align-self属性，其值应为 flex-end。", + "testString": "assert($('#box-2').css('align-self') == 'flex-end', '#box-2元素应有align-self属性，其值应为 flex-end。');" } ], "solutions": [], "hints": [], "releasedOn": "Feb 17, 2017", "challengeType": 0, - "translations": {}, "files": { "indexhtml": { "key": "indexhtml",