gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix challenge title formatting misc

Browse Source
This commit is contained in:
dhcodes 2017-02-23 11:42:29 -06:00
parent f8da35f794
commit baf1d0cff8
24 changed files with 220 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
challenges/00-getting-started/getting-started.json
View File

@ -6,7 +6,7 @@
"challenges": [
{
"id": "560add10cb82ac38a17513be",
"title": "Learn how freeCodeCamp Works",
"title": "Learn How freeCodeCamp Works",
"description": [
[
"//i.imgur.com/6ibIavQ.jpg",
@ -1168,7 +1168,7 @@
},
{
"id": "560add56cb82ac38a17513c0",
"title": "Configure your Code Portfolio",
"title": "Configure Your Code Portfolio",
"description": [
[
"//i.imgur.com/Tw5allJ.gif",

32
challenges/01-responsive-web-design/applied-accessibility.json
View File

@ -37,7 +37,7 @@
},
{
"id": "587d774c367417b2b2512a9c",
"title": "Add Alt Text to Images for Visually Impaired Accessibility",
"title": "Add a Text Alternative to Images for Visually Impaired Accessibility",
"description": [
"It's likely you've seen an <code>alt</code> attribute on an <code>img</code> tag in other challenges. <code>Alt</code> text describes the content of the image and provides a text-alternative. This helps in case the image fails to load or can't be seen by a user. It's also used by search engines to understand what an image contains to include it in search results. Here's an example:",
"<code>&lt;img src=&quot;importantLogo.jpeg&quot; alt=&quot;Company logo&quot;&gt;</code>",
@ -140,7 +140,7 @@
},
{
"id": "587d774e367417b2b2512a9f",
"title": "Jump Straight to the Content Using the Main Element",
"title": "Jump Straight to the Content Using the main Element",
"description": [
"HTML5 introduced a number of new elements that give developers more options while also incorporating accessibility features. These tags include <code>main</code>, <code>header</code>, <code>footer</code>, <code>nav</code>, <code>article</code>, and <code>section</code>, among others.",
"By default, a browser renders these elements similarly to the humble <code>div</code>. However, using them where appropriate gives additional meaning in your markup. The tag name alone can indicate the type of information it contains, which adds semantic meaning to that content. Assistive technologies can access this information to provide better page summary or navigation options to their users.",
@ -171,9 +171,9 @@
},
{
"id": "587d774e367417b2b2512aa0",
"title": "Wrap Content in the Article Element",
"title": "Wrap Content in the article Element",
"description": [
"<code>Article</code> is another one of the new HTML5 elements that adds semantic meaning to your markup. <code>Article</code> is a sectioning element, and is used to wrap independent, self-contained content. The tag works well with blog entries, forum posts, or news articles.",
"<code>article</code> is another one of the new HTML5 elements that adds semantic meaning to your markup. <code>Article</code> is a sectioning element, and is used to wrap independent, self-contained content. The tag works well with blog entries, forum posts, or news articles.",
"Determining whether content can stand alone is usually a judgement call, but there are a couple simple tests you can use. Ask yourself if you removed all surrounding context, would that content still make sense? Similarly for text, would the content hold up if it were in an RSS feed?",
"Remember that folks using assistive technologies rely on organized, semantically meaningful markup to better understand your work.",
"<strong>Note about <code>section</code> and <code>div</code></strong><br>The <code>section</code> element is also new with HTML5, and has a slightly different semantic meaning than <code>article</code>. An <code>article</code> is for standalone content, and a <code>section</code> is for grouping thematically related content. They can be used within each other, as needed. For example, if a book is the <code>article</code>, then each chapter is a <code>section</code>. When there's no relationship between groups of content, then use a <code>div</code>.",
@ -217,11 +217,11 @@
},
{
"id": "587d7787367417b2b2512aa1",
"title": "Make Screen Reader Navigation Easier with the Header Landmark",
"title": "Make Screen Reader Navigation Easier with the header Landmark",
"description": [
"The next HTML5 element that adds semantic meaning and improves accessibility is the <code>header</code> tag. It's used to wrap introductory information or navigation links for its parent tag, and works well around content that's repeated at the top on multiple pages.",
"<code>Header</code> shares the embedded landmark feature you saw with <code>main</code>, allowing assistive technologies to quickly navigate to that content.",
"<strong>Note</strong><br><code>Header</code> is meant for use in the <code>body</code> tag of your HTML document. This is different than the <code>head</code> element, which contains the page's title, meta information, etc.",
"<code>header</code> shares the embedded landmark feature you saw with <code>main</code>, allowing assistive technologies to quickly navigate to that content.",
"<strong>Note</strong><br><code>header</code> is meant for use in the <code>body</code> tag of your HTML document. This is different than the <code>head</code> element, which contains the page's title, meta information, etc.",
"<hr>",
"Camper Cat is writing some great articles about ninja training, and wants to add a page for them to his site. Change the top <code>div</code> that currently contains the <code>h1</code> to a <code>header</code> tag instead."
],
@ -266,7 +266,7 @@
},
{
"id": "587d7788367417b2b2512aa2",
"title": "Make Screen Reader Navigation Easier with the Nav Landmark",
"title": "Make Screen Reader Navigation Easier with the nav Landmark",
"description": [
"The <code>nav</code> element is another HTML5 item with the embedded landmark feature for easy screen reader navigation. This tag is meant to wrap around the main navigation links in your page.",
"If there are repeated site links at the bottom of the page, it isn't necessary to markup those with a <code>nav</code> tag as well. Using a <code>footer</code> (covered in the next challenge) is sufficient.",
@ -320,7 +320,7 @@
},
{
"id": "587d7788367417b2b2512aa3",
"title": "Make Screen Reader Navigation Easier with the Footer Landmark",
"title": "Make Screen Reader Navigation Easier with the footer Landmark",
"description": [
"Similar to <code>header</code> and <code>nav</code>, the <code>footer</code> element has a built-in landmark feature that allows assistive devices to quickly navigate to it. It's primarily used to contain copyright information or links to related documents that usually sit at the bottom of a page.",
"<hr>",
@ -375,7 +375,7 @@
},
{
"id": "587d7789367417b2b2512aa4",
"title": "Improve Accessibility of Audio Content with the Audio Element",
"title": "Improve Accessibility of Audio Content with the audio Element",
"description": [
"HTML5's <code>audio</code> element gives semantic meaning when it wraps sound or audio stream content in your markup. Audio content also needs a text alternative to be accessible to the deaf or hard of hearing. This can be done with nearby text on the page or a link to a transcript.",
"The <code>audio</code> tag supports the <code>controls</code> attribute. This shows the browser default play, pause, and other controls, and supports keyboard functionality. This is a boolean attribute, meaning it doesn't need a value, it's presence on the tag turns the setting on.",
@ -415,7 +415,7 @@
},
{
"id": "587d778a367417b2b2512aa5",
"title": "Improve Chart Accessibility with the Figure Element",
"title": "Improve Chart Accessibility with the figure Element",
"description": [
"HTML5 introduced the <code>figure</code> element, along with the related <code>figcaption</code>. Used together, these items wrap a visual representation (like an image, diagram, or chart) along with its caption. This gives a two-fold accessibility boost by both semantically grouping related content, and providing a text alternative that explains the <code>figure</code>.",
"For data visualizations like charts, the caption can be used to briefly note the trends or conclusions for users with visual impairments. Another challenge covers how to move a table version of the chart's data off-screen (using CSS) for screen reader users.",
@ -483,7 +483,7 @@
},
{
"id": "587d778a367417b2b2512aa6",
"title": "Improve Form Field Accessibility with the Label Element",
"title": "Improve Form Field Accessibility with the label Element",
"description": [
"Improving accessibility with semantic HTML markup applies to using both appropriate tag names as well as attributes. The next several challenges cover some important scenarios using attributes in forms.",
"The <code>label</code> tag wraps the text for a specific form control item, usually the name or label for a choice. This ties meaning to the item and makes the form more readable. The <code>for</code> attribute on a <code>label</code> tag explicitly associates that <code>label</code> with the form control and is used by screen readers.",
@ -539,7 +539,7 @@
},
{
"id": "587d778b367417b2b2512aa7",
"title": "Wrap Radio Buttons in a Fieldset Element for Better Accessibility",
"title": "Wrap Radio Buttons in a fieldset Element for Better Accessibility",
"description": [
"The next form topic covers accessibility of radio buttons. Each choice is given a <code>label</code> with a <code>for</code> attribute tying to the <code>id</code> of the corresponding item as covered in the last challenge. Since radio buttons often come in a group where the user must choose one, there's a way to semantically show the choices are part of a set.",
"The <code>fieldset</code> tag surrounds the entire grouping of radio buttons to achieve this. It often uses a <code>legend</code> tag to provide a description for the grouping, which is read by screen readers for each choice in the <code>fieldset</code> element.",
@ -659,7 +659,7 @@
},
{
"id": "587d778c367417b2b2512aa9",
"title": "Standardize Times with the HTML5 Datetime Attribute",
"title": "Standardize Times with the HTML5 datetime Attribute",
"description": [
"Continuing with the date theme, HTML5 also introduced the <code>time</code> element along with a <code>datetime</code> attribute to standardize times. This is an inline element that can wrap a date or time on a page. A valid format of that date is held by the <code>datetime</code> attribute. This is the value accessed by assistive devices. It helps avoid confusion by stating a standardized version of a time, even if it's written in an informal or colloquial manner in the text.",
"Here's an example:",
@ -1027,7 +1027,7 @@
},
{
"id": "587d7790367417b2b2512ab0",
"title": "Use Tabindex to Add keyboard Focus to an Element",
"title": "Use tabindex to Add Keyboard Focus to an Element",
"description": [
"The HTML <code>tabindex</code> attribute has three distinct functions relating to an element's keyboard focus. When it's on a tag, it indicates that element can be focused on. The value (an integer that's positive, negative, or zero) determines the behavior.",
"Certain elements, such as links and form controls, automatically receive keyboard focus when a user tabs through a page. It's in the same order as the elements come in the HTML source markup. This same functionality can be given to other elements, such as <code>div</code>, <code>span</code>, and <code>p</code>, by placing a <code>tabindex=\"0\"</code> attribute on them. Here's an example:",
@ -1098,7 +1098,7 @@
},
{
"id": "587d7790367417b2b2512ab1",
"title": "Use Tabindex to Specify the Order of Keyboard Focus for Several Elements",
"title": "Use tabindex to Specify the Order of Keyboard Focus for Several Elements",
"description": [
"The <code>tabindex</code> attribute also specifies the exact tab order of elements. This is achieved when the value of the attribute is set to a positive number of 1 or higher.",
"Setting a tabindex=\"1\" will bring keyboard focus to that element first. Then it cycles through the sequence of specified <code>tabindex</code> values (2, 3, etc.), before moving to default and <code>tabindex=\"0\"</code> items.",

40
challenges/01-responsive-web-design/applied-visual-design.json
View File

@ -25,7 +25,7 @@
},
{
"id": "587d7791367417b2b2512ab3",
"title": "Create Visual Balance Using the Text-align Property",
"title": "Create Visual Balance Using the text-align Property",
"description": [
"This section of the curriculum focuses on Applied Visual Design. The first group of challenges build on the given card layout to show a number of core principles.",
"Text is often a large part of web content. CSS has several options for how to align it with the <code>text-align</code> property.",
@ -82,7 +82,7 @@
},
{
"id": "587d7791367417b2b2512ab4",
"title": "Adjust the Width of an Element Using the Width Property",
"title": "Adjust the Width of an Element Using the width Property",
"description": [
"You can specify the width of an element using the <code>width</code> property in CSS. Values can be given in relative length units (such as em), absolute length units (such as px), or as a percentage of its containing parent element. Here's an example that changes the width of an image to 220px:",
"<blockquote>img {<br> width: 220px;<br>}</blockquote>",
@ -137,7 +137,7 @@
},
{
"id": "587d7791367417b2b2512ab5",
"title": "Adjust the Height of an Element Using the Height Property",
"title": "Adjust the Height of an Element Using the height Property",
"description": [
"You can specify the height of an element using the <code>height</code> property in CSS, similar to the <code>width</code> property. Here's an example that changes the height of an image to 20px:",
"<blockquote>img {<br> height: 20px;<br>}</blockquote>",
@ -252,7 +252,7 @@
},
{
"id": "587d781a367417b2b2512ab7",
"title": "Use the Strong Tag to Make Text Bold",
"title": "Use the strong Tag to Make Text Bold",
"description": [
"To make text bold, you can use the <code>strong</code> tag. This is often used to draw attention to text and symbolize that it is important. With the <code>strong</code> tag, the browser applies the CSS of <code>font-weight: bold;</code> to the element.",
"<hr>",
@ -553,7 +553,7 @@
},
{
"id": "587d781b367417b2b2512abc",
"title": "Adjust the Background-color Property of Text",
"title": "Adjust the background-color Property of Text",
"description": [
"Instead of adjusting your overall background or the color of the text to make the foreground easily readable, you can add a <code>background-color</code> to the element holding the text you want to emphasize. This challenge uses <code>rgba()</code> instead of <code>hex</code> codes or normal <code>rgb()</code>.",
"<blockquote>rgba stands for:<br> r = red<br> g = green<br> b = blue<br> a = alpha/level of opacity</blockquote>",
@ -681,7 +681,7 @@
},
{
"id": "587d781b367417b2b2512abe",
"title": "Add a Box-shadow to a Card-like Element",
"title": "Add a box-shadow to a Card-like Element",
"description": [
"The <code>box-shadow</code> property applies one or more shadows to an element.",
"The <code>box-shadow</code> property takes values for <code>offset-x</code> (how far to push the shadow horizontally from the element), <code>offset-y</code> (how far to push the shadow vertically from the element), <code>blur-radius</code>, <code>spread-radius</code> and a color value, in that order. The <code>blur-radius</code> and <code>spread-radius</code> values are optional.",
@ -816,7 +816,7 @@
},
{
"id": "587d781c367417b2b2512ac0",
"title": "Use the Text-transform Property to Make Text Uppercase",
"title": "Use the text-transform Property to Make Text Uppercase",
"description": [
"The <code>text-transform</code> property in CSS is used to change the appearance of text. It's a convenient way to make sure text on a webpage appears consistently, without having to change the text content of the actual HTML elements.",
"The following table shows how the different <code>text-transform</code>values change the example text \"Transform me\".",
@ -965,7 +965,7 @@
},
{
"id": "587d781c367417b2b2512ac2",
"title": "Set the Font-size for Multiple Heading Elements",
"title": "Set the font-size for Multiple Heading Elements",
"description": [
"The <code>font-size</code> property is used to specify how large the text is in a given element. This rule can be used for multiple elements to create visual consistency of text on a page. In this challenge, you'll set the values for all <code>h1</code> through <code>h6</code> tags to balance the heading sizes.",
"<hr>",
@ -1011,7 +1011,7 @@
},
{
"id": "587d781c367417b2b2512ac3",
"title": "Set the Font-weight for Multiple Heading Elements",
"title": "Set the font-weight for Multiple Heading Elements",
"description": [
"You set the <code>font-size</code> of each heading tag in the last challenge, here you'll adjust the <code>font-weight</code>.",
"The <code>font-weight</code> property sets how thick or thin characters are in a section of text.",
@ -1076,7 +1076,7 @@
},
{
"id": "587d781c367417b2b2512ac4",
"title": "Set the Font-size of Paragraph Text",
"title": "Set the font-size of Paragraph Text",
"description": [
"The <code>font-size</code> property in CSS is not limited to headings, it can be applied to any element containing text.",
"<hr>",
@ -1104,7 +1104,7 @@
},
{
"id": "587d781d367417b2b2512ac5",
"title": "Set the Line-height of Paragraphs",
"title": "Set the line-height of Paragraphs",
"description": [
"CSS offers the <code>line-height</code> property to change the height of each line in a block of text. As the name suggests, it changes the amount of vertical space that each line of text gets.",
"<hr>",
@ -1360,7 +1360,7 @@
},
{
"id": "587d78a3367417b2b2512ace",
"title": "Push Elements Left or Right with the Float Property",
"title": "Push Elements Left or Right with the float Property",
"description": [
"The next positioning tool does not actually use <code>position</code>, but sets the <code>float</code> property of an element. Floating elements are removed from the normal flow of a document and pushed to either the <code>left</code> or <code>right</code> of their containing parent element. It's commonly used with the <code>width</code> property to specify how much horizontal space the floated element requires.",
"<hr>",
@ -1410,7 +1410,7 @@
},
{
"id": "587d78a3367417b2b2512acf",
"title": "Change the Position of Overlapping Elements with the Z-index Property",
"title": "Change the Position of Overlapping Elements with the z-index Property",
"description": [
"When elements are positioned to overlap, the element coming later in the HTML markup will, by default, appear on the top of the other elements. However, the <code>z-index</code> property can specify the order of how elements are stacked on top of one another. It must be an integer (i.e. a whole number and not a decimal), and higher values for the <code>z-index</code> property of an element move it higher in the stack than those with lower values.",
"<hr>",
@ -1453,7 +1453,7 @@
},
{
"id": "587d78a3367417b2b2512ad0",
"title": "Center an Element Horizontally Using Margin",
"title": "Center an Element Horizontally Using the margin Property",
"description": [
"Another positioning technique is to center a block element horizontally. One way to do this is to set its <code>margin</code> to a value of auto.",
"This method works for images, too. Images are inline elements by default, but can be changed to block elements when you set the <code>display</code> property to block.",
@ -1580,7 +1580,7 @@
},
{
"id": "587d78a4367417b2b2512ad3",
"title": "Adjusting the Color of Various Elements to Complementary Colors",
"title": "Adjust the Color of Various Elements to Complementary Colors",
"description": [
"The Complementary Colors challenge showed that opposite colors on the color wheel can make each other appear more vibrant when placed side-by-side. However, the strong visual contrast can be jarring if it's overused on a website, and can sometimes make text harder to read if it's placed on a complementary-colored background. In practice, one of the colors is usually dominant and the complement is used to bring visual attention to certain content on the page.",
"<hr>",
@ -1862,7 +1862,7 @@
},
{
"id": "587d78a5367417b2b2512ad9",
"title": "Use the CSS Transform Scale Property to Change the Size of an Element",
"title": "Use the CSS Transform scale Property to Change the Size of an Element",
"description": [
"To change the scale of an element, CSS has the <code>transform</code> property, along with its <code>scale()</code> function. The following code example doubles the size of all the paragraph elements on the page:",
"<blockquote>p {<br> transform:scale(2);<br>}</blockquote>",
@ -1910,7 +1910,7 @@
},
{
"id": "587d78a5367417b2b2512ada",
"title": "Use the CSS Transform Property to Scale an Element on Hover",
"title": "Use the CSS Transform scale Property to Scale an Element on Hover",
"description": [
"The <code>transform</code> property has a variety of functions that lets you scale, move, rotate, skew, etc., your elements. When used with pseudo-classes such as <code>:hover</code> that specify a certain state of an element, the <code>transform</code> property can easily add interactivity to your elements.",
"Here's an example to scale the paragraph elements to 2.1 times their original size when a user hovers over them:",
@ -1951,7 +1951,7 @@
},
{
"id": "587d78a6367417b2b2512adb",
"title": "Use the CSS Transform Property SkewX",
"title": "Use the CSS Transform Property skewX to Skew an Element Along the X-Axis",
"description": [
"The next function of the <code>transform</code> property is <code>skewX()</code>, which skews the selected element along its X (horizontal) axis by a given degree.",
"The following code skews the paragraph element by -32 degrees along the X-axis.",
@ -1993,7 +1993,7 @@
},
{
"id": "587d78a6367417b2b2512adc",
"title": "Use the CSS Transform Property SkewY",
"title": "Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis",
"description": [
"Given that the <code>skewX()</code> function skews the selected element along the X-axis by a given degree, it is no surprise that the <code>skewY()</code> property skews an element along the Y (vertical) axis.",
"<hr>",
@ -2139,7 +2139,7 @@
},
{
"id": "587d78a7367417b2b2512adf",
"title": "Learn How CSS Keyframes and Animation Properties Work",
"title": "Learn How the CSS @keyframes and animation Properties Work",
"description": [
"To animate an element, you need to know about the animation properties and the <code>@keyframes</code> rule. The animation properties control how the animation should behave and the <code>@keyframes</code> rule controls what happens during that animation. There are eight animation properties in total. This challenge will keep it simple and cover the two most important ones first:",
"<code>animation-name</code> sets the name of the animation, which is later used by <code>@keyframes</code> to tell CSS which rules go with which animations.",

34
challenges/01-responsive-web-design/basic-css.json
View File

@ -923,7 +923,7 @@
},
{
"id": "bad87fee1348bd9acdf08812",
"title": "Size your Images",
"title": "Size Your Images",
"description": [
"CSS has a property called <code>width</code> that controls an element's width. Just like with fonts, we'll use <code>px</code> (pixels) to specify the image's width.",
"For example, if we wanted to create a CSS class called <code>larger-image</code> that gave HTML elements a width of 500 pixels, we'd use:",
@ -1038,7 +1038,7 @@
},
{
"id": "bad87fee1348bd9bedf08813",
"title": "Add Borders Around your Elements",
"title": "Add Borders Around Your Elements",
"description": [
"CSS borders have properties like <code>style</code>, <code>color</code> and <code>width</code>",
"For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class:",
@ -1168,7 +1168,7 @@
},
{
"id": "bad87fee1348bd9aedf08814",
"title": "Add Rounded Corners with a Border Radius",
"title": "Add Rounded Corners with border-radius",
"description": [
"Your cat photo currently has sharp corners. We can round out those corners with a CSS property called <code>border-radius</code>.",
"<hr>",
@ -1242,7 +1242,7 @@
"challengeType": 0,
"translations": {
"de": {
"title": "Füge abgerundete Ecken mit Border Radius hinzu",
"title": "Füge abgerundete Ecken mit border-radius hinzu",
"description": [
"Dein Katzenfoto hat momentan spitze Ecken. Wir können diese Ecken mit dem CSS Attribut <code>border-radius</code> abrunden.",
"<hr>",
@ -1251,7 +1251,7 @@
]
},
"es": {
"title": "Agrega esquinas redondeadas usando Border Radius",
"title": "Agrega esquinas redondeadas usando border-radius",
"description": [
"Tu foto del gato tiene actualmente esquinas angulares. Podemos redondear esas esquinas con una propiedad CSS llamada <code>border-radius</code>.",
"<hr>",
@ -1260,7 +1260,7 @@
]
},
"pt-br": {
"title": "Insira Bordas Arredondadas com o Border Radius",
"title": "Insira Bordas Arredondadas com o border-radius",
"description": [
"Sua foto com o gato possui cantos pontiagudos. Podemos arredondar os cantos com uma propriedade CSS chamado <code>border-radius</code>.",
"<hr>",
@ -1281,7 +1281,7 @@
},
{
"id": "bad87fee1348bd9aedf08815",
"title": "Make Circular Images with a Border Radius",
"title": "Make Circular Images with a border-radius",
"description": [
"In addition to pixels, you can also specify a <code>border-radius</code> using a percentage.",
"<hr>",
@ -1355,7 +1355,7 @@
"challengeType": 0,
"translations": {
"de": {
"title": "Erstelle runde Bilder mit einem Border Radius",
"title": "Erstelle runde Bilder mit einem border-radius",
"description": [
"Du kannst einem <code>border-radius</code> neben Pixeln auch Prozentwerte zuweisen.",
"<hr>",
@ -1363,7 +1363,7 @@
]
},
"es": {
"title": "Crea imágenes circulares usando Border Radius",
"title": "Crea imágenes circulares usando border-radius",
"description": [
"Además de pixeles, puedes especificar un <code>border-radius</code> usando porcentajes.",
"<hr>",
@ -1371,7 +1371,7 @@
]
},
"pt-br": {
"title": "Deixe as Imagens Circulares com o Border Radius",
"title": "Deixe as Imagens Circulares com o border-radius",
"description": [
"Assim como pixels, você também pode usar o <code>border-radius</code> com porcentagens.",
"<hr>",
@ -1390,7 +1390,7 @@
},
{
"id": "bad87fed1348bd9aede07836",
"title": "Give a Background Color to a Div Element",
"title": "Give a Background Color to a div Element",
"description": [
"You can set an element's background color with the <code>background-color</code> property.",
"For example, if you wanted an element's background color to be <code>green</code>, you'd put this within your <code>style</code> element:",
@ -1466,7 +1466,7 @@
"challengeType": 0,
"translations": {
"de": {
"title": "Gib einem Div Element eine Hintergrundfarbe",
"title": "Gib einem div Element eine Hintergrundfarbe",
"description": [
"Du kannst die Hintergrundfarbe von einem Element mit dem <code>background-color</code> Attribut setzen",
"Wenn du zum Beispiel die Hintergrundfarbe von einem Element <code>green</code> machen willst, schreibe dies in dein <code>style</code> Element:",
@ -1476,7 +1476,7 @@
]
},
"es": {
"title": "Da un color de fondo a un elemento Div",
"title": "Da un color de fondo a un elemento div",
"description": [
"Puedes fijar el color de fondo de un elemento con la propiedad <code>background-color</code>.",
"Por ejemplo, si quieres que el color de fondo de un elemento sea verde (<code>green</code>), dentro de tu elemento <code>style</code> pondrías:",
@ -1486,7 +1486,7 @@
]
},
"pt-br": {
"title": "Dê uma Cor de Fundo a um Elemento Div",
"title": "Dê uma Cor de Fundo a um Elemento div",
"description": [
"Você pode acrescentar uma cor de fundo de um elemento com a propriedade <code>background-color</code>.",
"Por exemplo, se você quiser que a cor de fundo de um elemento seja verde (<code>green</code>), dentro de seu elemento <code>style</code> seria assim:",
@ -1511,7 +1511,7 @@
},
{
"id": "bad87eee1348bd9aede07836",
"title": "Set the ID of an Element",
"title": "Set the id of an Element",
"description": [
"In addition to classes, each HTML element can also have an <code>id</code> attribute.",
"There are several benefits to using <code>id</code> attributes: You can use an <code>id</code> to style a single element and later you'll learn that you can use them to select and modify specific elements with JavaScript.",
@ -1643,7 +1643,7 @@
},
{
"id": "bad87dee1348bd9aede07836",
"title": "Use an ID Attribute to Style an Element",
"title": "Use an id Attribute to Style an Element",
"description": [
"One cool thing about <code>id</code> attributes is that, like classes, you can style them using CSS.",
"However, an <code>id</code> is not reusable and should only be applied to one element. An <code>id</code> also has a higher specificity (importance) than a class so if both are applied to the same element and have conflicting styles, the styles of the <code>id</code> will be applied.",
@ -1776,7 +1776,7 @@
},
{
"id": "bad88fee1348bd9aedf08825",
"title": "Adjusting the Padding of an Element",
"title": "Adjust the Padding of an Element",
"description": [
"Now let's put our Cat Photo App away for a little while and learn more about styling HTML.",
"You may have already noticed this, but all HTML elements are essentially little rectangles.",

12
challenges/01-responsive-web-design/basic-html-and-html5.json
View File

@ -549,7 +549,7 @@
},
{
"id": "bad87fee1348bd9aedf08812",
"title": "Add Images to your Website",
"title": "Add Images to Your Website",
"description": [
"You can add images to your website by using the <code>img</code> element, and point to a specific image's URL using the <code>src</code> attribute.",
"An example of this would be:",
@ -841,7 +841,7 @@
},
{
"id": "bad87fee1348bd9aedf08817",
"title": "Make Dead Links using the Hash Symbol",
"title": "Make Dead Links Using the Hash Symbol",
"description": [
"Sometimes you want to add <code>a</code> elements to your website before you know where they will link.",
"This is also handy when you're changing the behavior of a link using <code>jQuery</code>, which we'll learn about later.",
@ -1882,7 +1882,7 @@
},
{
"id": "bad87fee1348bd9aede08835",
"title": "Nest Many Elements within a Single Div Element",
"title": "Nest Many Elements within a Single div Element",
"description": [
"The <code>div</code> element, also known as a division element, is a general purpose container for other elements.",
"The <code>div</code> element is probably the most commonly used HTML element of all.",
@ -1932,7 +1932,7 @@
"challengeType": 0,
"translations": {
"de": {
"title": "Umschließe viele Elemente mit einem einzigen Div Element",
"title": "Umschließe viele Elemente mit einem einzigen div Element",
"description": [
"Das <code>div</code> Element oder \"Division\" ist ein allgemeiner Container für andere Elemente.",
"Das <code>div</code> Element ist wahrscheinlich das am häufigsten verwendete HTML Element.",
@ -1943,7 +1943,7 @@
]
},
"es": {
"title": "Anida muchos elementos dentro de una sólo elemento Div",
"title": "Anida muchos elementos dentro de una sólo elemento div",
"description": [
"El elemento <code>div</code>, también conocido como un elemento de división, es un contenedor de propósito general para otros elementos.",
"El elemento <code>div</code> es probablemente el elemento HTML más utilizado.",
@ -1954,7 +1954,7 @@
]
},
"pt-br": {
"title": "Aninhe Muitos Elementos Dentro de um só Elemento Div",
"title": "Aninhe Muitos Elementos Dentro de um só Elemento div",
"description": [
"O elemento <code>div</code>, também conhecido como elemento de divisão, é um contentor de propósito geral para outros elementos.",
"O elemento <code>div</code> é provavelmente o elemento HTML mais utilizado.",

34
challenges/01-responsive-web-design/css-flexbox.json
View File

@ -25,7 +25,7 @@
},
{
"id": "587d78ab367417b2b2512af0",
"title": "Using display: flex with Two Boxes",
"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 <code>display: flex;</code> on an element allows you to use other flex properties to build a responsive page.",
@ -69,7 +69,7 @@
},
{
"id": "587d78ab367417b2b2512af1",
"title": "Adding Flex Superpowers to the Tweet Embed",
"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 <code>display: flex</code>. Here you'll add it to several components in the tweet embed to start adjusting their positioning.",
"<hr>",
@ -185,7 +185,7 @@
},
{
"id": "587d78ab367417b2b2512af2",
"title": "Using the Flex-direction Property to Make a Row",
"title": "Use the flex-direction Property to Make a Row",
"description": [
"Adding <code>display: flex</code> 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 <code>flex-direction</code> 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 <code>flex-direction</code> are row-reverse and column-reverse.",
@ -229,7 +229,7 @@
},
{
"id": "587d78ab367417b2b2512af3",
"title": "Applying the Flex-direction Property to Create Rows in the Tweet Embed",
"title": "Apply the flex-direction Property to Create Rows in the Tweet Embed",
"description": [
"The <code>header</code> and <code>footer</code> in the tweet embed example have child items that could be arranged as rows using the <code>flex-direction</code> property. This tells CSS to align the children horizontally.",
"<hr>",
@ -341,7 +341,7 @@
},
{
"id": "587d78ac367417b2b2512af4",
"title": "Using the Flex-direction Property to Make a Column",
"title": "Use the flex-direction Property to Make a Column",
"description": [
"The last two challenges used the <code>flex-direction</code> property set to row. This property can also create a column by vertically stacking the children of a flex container.",
"<hr>",
@ -383,7 +383,7 @@
},
{
"id": "587d78ac367417b2b2512af5",
"title": "Applying the Flex-direction Property to Create a Column in the Tweet Embed",
"title": "Apply the flex-direction Property to Create a Column in the Tweet Embed",
"description": [
"The tweet embed <code>header</code> and <code>footer</code> used the <code>flex-direction</code> property earlier with a row value. Similarly, the items inside the <code>.profile-name</code> element would work well stacked as a column.",
"<hr>",
@ -491,7 +491,7 @@
},
{
"id": "587d78ac367417b2b2512af6",
"title": "Aligning Elements Using the Justify-content Property",
"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 <code>justify-content</code> property has several options to do this. But first, there is some important terminology to understand before reviewing those options.",
"<a href=\"https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg\" target=\"_blank\">Here is a useful image showing a row to illustrate the concepts below.</a>",
@ -545,7 +545,7 @@
},
{
"id": "587d78ac367417b2b2512af7",
"title": "Using the Justify-content Property in the Tweet Embed",
"title": "Use the justify-content Property in the Tweet Embed",
"description": [
"The last challenge showed an example of the <code>justify-content</code> property. For the tweet embed, this property can be applied to align the items in the <code>.profile-name</code> element.",
"<hr>",
@ -654,7 +654,7 @@
},
{
"id": "587d78ad367417b2b2512af8",
"title": "Aligning Elements Using the Align-items Property",
"title": "Align Elements Using the align-items Property",
"description": [
"The <code>align-items</code> property is similar to <code>justify-content</code>. Recall that the <code>justify-content</code> 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 <strong>cross axis</strong> which is the opposite of the main axis. For rows, the cross axis is vertical and for columns, the cross axis is horizontal.",
@ -709,7 +709,7 @@
},
{
"id": "587d78ad367417b2b2512af9",
"title": "Using the Align-items Property in the Tweet Embed",
"title": "Use the align-items Property in the Tweet Embed",
"description": [
"The last challenge introduced the <code>align-items</code> property and gave an example. This property can be applied to a few tweet embed elements to align the flex items inside them.",
"<hr>",
@ -822,7 +822,7 @@
},
{
"id": "587d78ad367417b2b2512afa",
"title": "Using the Flex-wrap Property to Wrap a Row or Column",
"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 <code>flex-wrap</code> 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.",
@ -897,7 +897,7 @@
},
{
"id": "587d78ad367417b2b2512afb",
"title": "Using the Flex-shrink Property to Shrink Items",
"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 <code>flex-shrink</code> 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.",
@ -944,7 +944,7 @@
},
{
"id": "587d78ae367417b2b2512afc",
"title": "Using the Flex-grow Property to Expand Items",
"title": "Use the flex-grow Property to Expand Items",
"description": [
"The opposite of <code>flex-shrink</code> is the <code>flex-grow</code> property. Recall that <code>flex-shrink</code> controls the size of the items when the container shrinks. The <code>flex-grow</code> property controls the size of items when the parent container expands.",
"Using a similar example from the last challenge, if one item has a <code>flex-grow</code> value of 1 and the other has a <code>flex-grow</code> value of 3, the one with the value of 3 will grow three times as much as the other.",
@ -990,7 +990,7 @@
},
{
"id": "587d78ae367417b2b2512afd",
"title": "Using the Flex-basis Property to Set the Initial Size of an Item",
"title": "Use the flex-basis Property to Set the Initial Size of an Item",
"description": [
"The previous example included <code>flex-basis</code> to help demonstrate how the <code>flex-grow</code> property works. The <code>flex-basis</code> property specifies the initial size of the item before CSS makes adjustments with <code>flex-shrink</code> or <code>flex-grow</code>.",
"The units used by the <code>flex-basis</code> property are the same as other size properties (<code>px</code>, <code>em</code>, <code>%</code>, etc.). The value <code>auto</code> sizes items based on the content.",
@ -1036,7 +1036,7 @@
},
{
"id": "587d78ae367417b2b2512afe",
"title": "Using the Flex Shorthand Property",
"title": "Use the flex Shorthand Property",
"description": [
"There is a shortcut available to set several flex properties at once. The <code>flex-grow</code>, <code>flex-shrink</code>, and <code>flex-basis</code> properties can all be set together by using the <code>flex</code> property.",
"For example, <code>flex: 1 0 10px;</code> will set the item to <code>flex-grow: 1;</code>, <code>flex-shrink: 0;</code>, and <code>flex-basis: 10px;</code>.",
@ -1083,7 +1083,7 @@
},
{
"id": "587d78ae367417b2b2512aff",
"title": "Using the Order Property to Rearrange Items",
"title": "Use the order Property to Rearrange Items",
"description": [
"The <code>order</code> 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.",
"<hr>",
@ -1128,7 +1128,7 @@
},
{
"id": "587d78af367417b2b2512b00",
"title": "Using the Align-self Property",
"title": "Use the align-self Property",
"description": [
"The final property for flex items is <code>align-self</code>. 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 <code>float</code>, <code>clear</code>, and <code>vertical-align</code> do not work on flex items.",
"<code>align-self</code> accepts the same values as <code>align-items</code> and will override any value set by the <code>align-items</code> property.",

2
challenges/02-javascript-algorithms-and-data-structures/basic-data-structures.json
View File

@ -595,7 +595,7 @@
},
{
"id": "587d7b7c367417b2b2512b1b",
"title": "Use the Delete Keyword to Remove Object Properties",
"title": "Use the delete Keyword to Remove Object Properties",
"description": [
"Now you know what objects are and their basic features and advantages. In short, they are key-value stores which provide a flexible, intuitive way to structure data, <strong><em>and</em></strong>, they provide very fast lookup time. Throughout the rest of these challenges, we will describe several common operations you can perform on objects so you can become comfortable applying these useful data structures in your programs.",
"In earlier challenges, we have both added to and modified an object's key-value pairs. Here we will see how we can <em>remove</em> a key-value pair from an object.",

6
challenges/02-javascript-algorithms-and-data-structures/basic-javascript.json
View File

@ -6,7 +6,7 @@
"challenges": [
{
"id": "bd7123c9c441eddfaeb4bdef",
"title": "Comment your JavaScript Code",
"title": "Comment Your JavaScript Code",
"description": [
"Comments are lines of code that JavaScript will intentionally ignore. Comments are a great way to leave notes to yourself and to other people who will later need to figure out what that code does.",
"There are two ways to write comments in JavaScript:",
@ -3710,7 +3710,7 @@
},
{
"id": "56533eb9ac21ba0edf2244dd",
"title": "Selecting from many options with Switch Statements",
"title": "Selecting from Many Options with Switch Statements",
"description": [
"If you have many options to choose from, use a <code>switch</code> statement. A <code>switch</code> statement tests a value and can have many <code>case</code> statements which define various possible values. Statements are executed from the first matched <code>case</code> value until a <code>break</code> is encountered.",
"Here is a <dfn>pseudocode</dfn> example:",
@ -3767,7 +3767,7 @@
},
{
"id": "56533eb9ac21ba0edf2244de",
"title": "Adding a default option in Switch statements",
"title": "Adding a Default Option in Switch Statements",
"description": [
"In a <code>switch</code> statement you may not be able to specify all possible values as <code>case</code> statements. Instead, you can add the <code>default</code> statement which will be executed if no matching <code>case</code> statements are found. Think of it like the final <code>else</code> statement in an <code>if/else</code> chain.",
"A <code>default</code> statement should be the last case.",

40
challenges/02-javascript-algorithms-and-data-structures/es6.json
View File

@ -100,7 +100,7 @@
},
{
"id": "587d7b87367417b2b2512b41",
"title": "Use the const Keyword",
"title": "Declare a Read-Only Variable with the const Keyword",
"description": [
"<code>let</code> is not the only new way to declare variables. In ES6, you can also declare variables using the <code>const</code> keyword.",
"<code>const</code> has all the awesome features that <code>let</code> has, with the added bonus that variables declared using <code>const</code> are read-only. They are a constant value, which means that once a variable is assigned with <code>const</code>, it cannot be reassigned.",
@ -169,7 +169,7 @@
},
{
"id": "587d7b87367417b2b2512b43",
"title": "Write Arrow Functions",
"title": "Use Arrow Functions to Write Concise Anonymous Functions",
"description": [
"In JavaScript, we often don't need to name our functions, especially when passing a function as an argument to another function. Instead, we create inline functions. We don't need to name these functions because we do not reuse them anywhere else.",
"To achieve this, we often use the following syntax:",
@ -242,7 +242,7 @@
},
{
"id": "587d7b88367417b2b2512b45",
"title": "Write Arrow Functions with Higher Order Functions",
"title": "Write Higher Order Arrow Functions",
"description": [
"It's time we see how powerful arrow functions are when processing data.",
"Arrow functions work really well with higher order functions, such as <code>map()</code>, <code>filter()</code>, and <code>reduce()</code>, that take other functions as arguments for processing collections of data.",
@ -281,7 +281,7 @@
},
{
"id": "587d7b88367417b2b2512b46",
"title": "Write Functions with Default Parameters",
"title": "Set Default Parameters for Your Functions",
"description": [
"In order to help us create more flexible functions, ES6 introduces <dfn>default parameters</dfn> for functions.",
"Check out this code:",
@ -340,7 +340,7 @@
},
{
"id": "587d7b89367417b2b2512b48",
"title": "Use the Spread Operator",
"title": "Use the Spread Operator to Evaluate Arrays In-Place",
"description": [
"ES6 introduces the <dfn>spread operator</dfn>, which allows us to expand arrays and other expressions in places where multiple parameters or elements are expected.",
"The ES5 code below uses <code>apply()</code> to compute the maximum value in an array:",
@ -374,7 +374,7 @@
},
{
"id": "587d7b89367417b2b2512b49",
"title": "Use Destructuring Assignment with Objects",
"title": "Use Destructuring Assignment to Assign Variables from Objects",
"description": [
"We earlier saw how spread operator can effectively spread, or unpack, the contents of the array.",
"We can do something similar with objects as well. <dfn>Destructuring assignment</dfn> is special syntax for neatly assigning values taken directly from an object to variables.",
@ -406,7 +406,7 @@
},
{
"id": "587d7b89367417b2b2512b4a",
"title": "Use Destructuring Assignment with Nested Objects",
"title": "Use Destructuring Assignment to Assign Variables from Nested Objects",
"description": [
"We can similarly destructure <em>nested</em> objects into variables.",
"Consider the following code:",
@ -436,7 +436,7 @@
},
{
"id": "587d7b89367417b2b2512b4b",
"title": "Use Destructuring Assignment with Arrays",
"title": "Use Destructuring Assignment to Assign Variables from Arrays",
"description": [
"ES6 makes destructuring arrays as easy as destructuring objects.",
"One key difference between the spread operator and array destructuring is that the spread operator unpacks all contents of an array into a comma-separated list. Consequently, you cannot pick and choose which elements or you want to assign to variables.",
@ -468,7 +468,7 @@
},
{
"id": "587d7b8a367417b2b2512b4c",
"title": "Use Destructuring Assignment with the Rest Operator",
"title": "Use Destructuring Assignment with the Rest Operator to Reassign Array Elements",
"description": [
"In some situations involving array destructuring, we might want to collect the rest of the elements into a separate array.",
"The result is similar to <code>Array.prototype.slice()</code>, as shown below:",
@ -499,7 +499,7 @@
},
{
"id": "587d7b8a367417b2b2512b4d",
"title": "Use Destructuring Assignment on Function Parameters",
"title": "Use Destructuring Assignment to Pass an Object as a Function's Parameters",
"description": [
"In some cases, you can destructure the object in a function argument itself.",
"Consider the code below:",
@ -538,7 +538,7 @@
},
{
"id": "587d7b8a367417b2b2512b4e",
"title": "String Interpolation using Backquotes",
"title": "Interpolate a String Using Backquotes",
"description": [
"A new feature of ES6 or ES2015, is that it allows you to use string interpolation with back-ticks.",
"Consider the code below",
@ -591,7 +591,7 @@
},
{
"id": "587d7b8a367417b2b2512b4f",
"title": "Enhanced Object Literals : Simple Fields",
"title": "Write Concise Object Literal Declarations Using Simple Fields",
"description": [
"ES6 adds some nice support for removing boiler-plate from object literals declaration.",
"Consider the following:",
@ -631,7 +631,7 @@
},
{
"id": "587d7b8b367417b2b2512b50",
"title": "Enhanced Object Literals : Functions",
"title": "Write Concise Declarative Functions with ES6",
"description": [
"With ES6, it's possible to remove the keyword function as follows, from object literals:",
"<blockquote>const Container extends Component {<br>&nbsp;&nbsp;render: function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;return {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Container<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;}<br>}</blockquote>",
@ -668,7 +668,7 @@
},
{
"id": "587d7b8b367417b2b2512b53",
"title": "class Syntax",
"title": "Use class Syntax to Define a Constructor Function",
"description": [
"ES6 provides a new syntax to help create objects, using the keyword <dfn>class</dfn>.",
"This is to be noted, that the <code>class</code> syntax is just a syntax, and not a full-fledged class based implementation of object oriented paradigm, unlike in languages like Java, or Python, or Ruby etc.",
@ -700,7 +700,7 @@
},
{
"id": "587d7b8c367417b2b2512b54",
"title": "class getters and setters",
"title": "Use getters and setters to Control Access to an Object",
"description": [
"You can obtain values from an object, and set a value of a property within an object.",
"These are classically called <dfn>getters</dfn> and <dfn>setters</dfn>.",
@ -739,7 +739,7 @@
},
{
"id": "587d7b8c367417b2b2512b55",
"title": "Import vs. Require: What's the difference?",
"title": "Understand the Differences Between import and require",
"description": [
"In the past, the function <code>require()</code> would be used to import the functions and code in external files and modules. While handy, this presents a problem: some files and modules are rather large, and you may only need certain code from those external resources.",
"ES6 gives us a very handy tool known as <dfn>import</dfn>. With it, we can choose which parts of a module or file to load into a given file, saving time and memory.",
@ -766,7 +766,7 @@
},
{
"id": "587d7b8c367417b2b2512b56",
"title": "Export: One of Import's siblings.",
"title": "Use export to Reuse a Code Block",
"description": [
"In the previous challenge, you learned about <code>import</code> and how it can be leveraged to import small amounts of code from large files. In order for this to work, though, we must utilize one of the statements that goes with <code>import</code>, known as <dfn>export</dfn>. When we want some code - a function, or a variable - to be usable in another file, we must export it in order to import it into another file. Like <code>import</code>, <code>export</code> is a non-browser feature.",
"The following is what we refer to as a <dfn>named export</dfn>. With this, we can import any code we export into another file with the <code>import</code> syntax you learned in the last lesson. Here's an example:",
@ -792,7 +792,7 @@
},
{
"id": "587d7b8c367417b2b2512b57",
"title": "Import Everything",
"title": "Use * to Import Everything from a File",
"description": [
"Suppose you have a file that you wish to import all of its contents into the current file. This can be done with the <dfn>import *</dfn> syntax.",
"Here's an example where the contents of a file named <code>\"math_functions\"</code> are imported into a file in the same directory:",
@ -817,7 +817,7 @@
},
{
"id": "587d7b8c367417b2b2512b58",
"title": "Export Default",
"title": "Create an Export Fallback with export default",
"description": [
"In the <code>export</code> lesson, you learned about the syntax referred to as a <dfn>named export</dfn>. This allowed you to make multiple functions and variables available for use in other files.",
"There is another <code>export</code> syntax you need to know, known as <dfn>export default</dfn>. Usually you will use this syntax if only one value is being exported from a file. It is also used to create a fallback value for a file or module.",
@ -840,7 +840,7 @@
},
{
"id": "587d7b8d367417b2b2512b59",
"title": "Importing a Default Export",
"title": "Import a Default Export",
"description": [
"In the last challenge, you learned about <code>export default</code> and its uses. It is important to note that, to import a default export, you need to use a different <code>import</code> syntax.",
"In the following example, we have a function, <code>add</code>, that is the default export of a file, <code>\"math_functions\"</code>. Here is how to import it:",

28
challenges/02-javascript-algorithms-and-data-structures/functional-programming.json
View File

@ -361,7 +361,7 @@
},
{
"id": "587d7b8f367417b2b2512b61",
"title": "Use Map to Extract Data from an Array",
"title": "Use the map Method to Extract Data from an Array",
"description": [
"So far we have learned to use pure functions to avoid side effects in a program. Also, we have seen the value in having a function only depend on its input arguments.",
"This is only the beginning. As its name suggests, functional programming is centered around a theory of functions.",
@ -511,7 +511,7 @@
},
{
"id": "587d7b8f367417b2b2512b62",
"title": "Implement Map on a Prototype",
"title": "Implement map on a Prototype",
"description": [
"As you have seen from applying <code>Array.prototype.map()</code>, or simply <code>map()</code> earlier, the <code>map</code> method returns an array of the same length as the one it was called on. It also doesn't alter the original array, as long as its callback function doesn't.",
"In other words, <code>map</code> is a pure function, and its output depends solely on its inputs. Plus, it takes another function as its argument.",
@ -549,7 +549,7 @@
},
{
"id": "587d7b8f367417b2b2512b63",
"title": "Use Filter to Extract Data from an Array",
"title": "Use the filter Method to Extract Data from an Array",
"description": [
"Another useful array function is <code>Array.prototype.filter()</code>, or simply <code>filter()</code>. The <code>filter</code> method returns a new array which is at most as long as the original array, but usually has fewer items.",
"<code>Filter</code> doesn't alter the original array, just like <code>map</code>. It takes a callback function that applies the logic inside the callback on each element of the array. If an element returns true based on the criteria in the callback function, then it is included in the new array.",
@ -693,7 +693,7 @@
},
{
"id": "587d7b8f367417b2b2512b64",
"title": "Implement the Filter Function on a Prototype",
"title": "Implement the filter Method on a Prototype",
"description": [
"It would teach us a lot about the <code>filter</code> method if we try to implement a version of it that behaves exactly like <code>Array.prototype.filter()</code>. It can use either a <code>for</code> loop or <code>Array.prototype.forEach()</code>.",
"Note: A pure function is allowed to alter local variables defined within its scope, although, it's preferable to avoid that as well.",
@ -729,7 +729,7 @@
},
{
"id": "587d7b90367417b2b2512b65",
"title": "Return Part of an Array Using the Slice Method",
"title": "Return Part of an Array Using the slice Method",
"description": [
"The <code>slice</code> method returns a copy of certain elements of an array. It can take two arguments, the first gives the index of where to begin the slice, the second is the index for where to end the slice (and it's non-inclusive). If the arguments are not provided, the default is to start at the beginning of the array through the end, which is an easy way to make a copy of the entire array. The <code>slice</code> method does not mutate the original array, but returns a new one.",
"Here's an example:",
@ -762,7 +762,7 @@
},
{
"id": "9d7123c8c441eeafaeb5bdef",
"title": "Remove Elements from an Array Using Slice Instead of Splice",
"title": "Remove Elements from an Array Using slice Instead of splice",
"description": [
"A common pattern while working with arrays is when you want to remove items and keep the rest of the array. JavaScript offers the <code>splice</code> method for this, which takes arguments for the index of where to start removing items, then the number of items to remove. If the second argument is not provided, the default is to remove items through the end. However, the <code>splice</code> method mutates the original array it is called on. Here's an example:",
"<blockquote>var cities = [\"Chicago\", \"Delhi\", \"Islamabad\", \"London\", \"Berlin\"];<br>cities.splice(3, 1); // Returns \"London\" and deletes it from the cities array<br>// cities is now [\"Chicago\", \"Delhi\", \"Islamabad\", \"Berlin\"]</blockquote>",
@ -795,7 +795,7 @@
},
{
"id": "587d7da9367417b2b2512b66",
"title": "Combine Two Arrays Using the Concat Method",
"title": "Combine Two Arrays Using the concat Method",
"description": [
"<code>Concatenation</code> means to join items end to end. JavaScript offers the <code>concat</code> method for both strings and arrays that work in the same way. For arrays, the method is called on one, then another array is provided as the argument to <code>concat</code>, which is added to the end of the first array. It returns a new array and does not mutate either of the original arrays. Here's an example:",
"<blockquote>[1, 2, 3].concat([4, 5, 6]);<br>// Returns a new array [1, 2, 3, 4, 5, 6]</blockquote>",
@ -827,7 +827,7 @@
},
{
"id": "587d7da9367417b2b2512b67",
"title": "Add Elements to the End of an Array Using Concat Instead of Push",
"title": "Add Elements to the End of an Array Using concat Instead of push",
"description": [
"Functional programming is all about creating and using non-mutating functions.",
"The last challenge introduced the <code>concat</code> method as a way to combine arrays into a new one without mutating the original arrays. Compare <code>concat</code> to the <code>push</code> method. <code>Push</code> adds an item to the end of the same array it is called on, which mutates that array. Here's an example:",
@ -862,7 +862,7 @@
},
{
"id": "587d7da9367417b2b2512b68",
"title": "Use the Reduce Method to Analyze Data",
"title": "Use the reduce Method to Analyze Data",
"description": [
"<code>Array.prototype.reduce()</code>, or simply <code>reduce()</code>, is the most general of all array operations in JavaScript. You can solve almost any array processing problem using the <code>reduce</code> method.",
"This is not the case with the <code>filter</code> and <code>map</code> methods since they do not allow interaction between two different elements of the array. For example, if you want to compare elements of the array, or add them together, <code>filter</code> or <code>map</code> could not process that.",
@ -1012,7 +1012,7 @@
},
{
"id": "587d7da9367417b2b2512b69",
"title": "Sort an Array Alphabetically using the Sort Method",
"title": "Sort an Array Alphabetically using the sort Method",
"description": [
"The <code>sort</code> method sorts the elements of an array according to the callback function.",
"For example:",
@ -1074,7 +1074,7 @@
},
{
"id": "587d7daa367417b2b2512b6b",
"title": "Split a String into an Array Using the Split Method",
"title": "Split a String into an Array Using the split Method",
"description": [
"The <code>split</code> method splits a string into an array of strings. It takes an argument for the delimiter, which can be a character to use to break up the string or a regular expression. For example, if the delimiter is a space, you get an array of words, and if the delimiter is an empty string, you get an array of each character in the string.",
"Here are two examples that split one string by spaces, then another by digits using a regular expression:",
@ -1108,7 +1108,7 @@
},
{
"id": "587d7daa367417b2b2512b6c",
"title": "Combine an Array into a String Using the Join Method",
"title": "Combine an Array into a String Using the join Method",
"description": [
"The <code>join</code> method is used to join the elements of an array together to create a string. It takes an argument for the delimiter that is used to separate the array elements in the string.",
"Here's an example:",
@ -1187,7 +1187,7 @@
},
{
"id": "587d7dab367417b2b2512b6e",
"title": "Use the Every Method to Check that Every Element in an Array Meets a Criteria",
"title": "Use the every Method to Check that Every Element in an Array Meets a Criteria",
"description": [
"The <code>every</code> method works with arrays to check if <em>every</em> element passes a particular test. It returns a Boolean value - <code>true</code> if all values meet the criteria, <code>false</code> if not.",
"For example, the following code would check if every element in the <code>numbers</code> array is less than 10:",
@ -1218,7 +1218,7 @@
},
{
"id": "587d7dab367417b2b2512b6f",
"title": "Use the Some Method to Check that Any Elements in an Array Meet a Criteria",
"title": "Use the some Method to Check that Any Elements in an Array Meet a Criteria",
"description": [
"The <code>some</code> method works with arrays to check if <em>any</em> element passes a particular test. It returns a Boolean value - <code>true</code> if any of the values meet the criteria, <code>false</code> if not.",
"For example, the following code would check if any element in the <code>numbers</code> array is less than 10:",

4
challenges/02-javascript-algorithms-and-data-structures/object-oriented-programming.json
View File

@ -123,14 +123,14 @@
},
{
"id": "587d7dad367417b2b2512b76",
"title": "Make Code More Reusable with This",
"title": "Make Code More Reusable with the this Keyword",
"description": [
"The last challenge introduced a <code>method</code> to the <code>duck</code> object. It used <code>duck.name</code> dot notation to access the value for the <code>name</code> property within the return statement:",
"<code>sayName: function() {return \"The name of this duck is \" + duck.name + \".\";}</code>",
"While this is a valid way to access the object's property, there is a pitfall here. If the variable name changes, any code referencing the original name would need to be updated as well. In a short object definition, it isn't a problem, but if an object has many references to its properties there is a greater chance for error.",
"A way to avoid these issues is with the <code>this</code> keyword:",
"<blockquote>let duck = {<br>&nbsp;&nbsp;name: \"Aflac\",<br>&nbsp;&nbsp;numLegs: 2,<br>&nbsp;&nbsp;sayName: function() {return \"The name of this duck is \" + this.name + \".\";}<br>};</blockquote>",
"<code>This</code> is a deep topic, and the above example is only one way to use it. In the current context, <code>this</code> refers to the object that the method is associated with: <code>duck</code>.",
"<code>this</code> is a deep topic, and the above example is only one way to use it. In the current context, <code>this</code> refers to the object that the method is associated with: <code>duck</code>.",
"If the object's name is changed to <code>mallard</code>, it is not necessary to find all the references to <code>duck</code> in the code. It makes the code reusable and easier to read.",
"<hr>",
"Modify the <code>dog.sayLegs</code> method to remove any references to <code>dog</code>. Use the <code>duck</code> example for guidance."

16
challenges/03-front-end-libraries/bootstrap.json
View File

@ -627,7 +627,7 @@
},
{
"id": "bad87fee1348cd8acef08813",
"title": "Call out Optional Actions with Button Info",
"title": "Call out Optional Actions with btn-info",
"description": [
"Bootstrap comes with several pre-defined colors for buttons. The <code>btn-info</code> class is used to call attention to optional actions that the user can take.",
"Create a new block-level Bootstrap button below your \"Like\" button with the text \"Info\", and add Bootstrap's <code>btn-info</code> and <code>btn-block</code> classes to it.",
@ -722,7 +722,7 @@
},
{
"id": "bad87fee1348ce8acef08814",
"title": "Warn your Users of a Dangerous Action",
"title": "Warn Your Users of a Dangerous Action with btn-danger",
"description": [
"Bootstrap comes with several pre-defined colors for buttons. The <code>btn-danger</code> class is the button color you'll use to notify users that the button performs a destructive action, such as deleting a cat photo.",
"Create a button with the text \"Delete\" and give it the class <code>btn-danger</code>.",
@ -1039,7 +1039,7 @@
},
{
"id": "bad87fee1348bd9aedf08845",
"title": "Use Spans for Inline Elements",
"title": "Use a span to Target Inline Elements",
"description": [
"You can use spans to create inline elements. Remember when we used the <code>btn-block</code> class to make the button fill the entire row?",
"This image illustrates the difference between <code>inline</code> elements and <code>block-level</code> elements:",
@ -1932,7 +1932,7 @@
},
{
"id": "bad87fee1348bd9aec908746",
"title": "House our page within a Bootstrap Container Fluid Div",
"title": "House our page within a Bootstrap container-fluid div",
"description": [
"Now let's make sure all the content on your page is mobile-responsive.",
"Let's nest your <code>h3</code> element within a <code>div</code> element with the class <code>container-fluid</code>."
@ -2007,7 +2007,7 @@
},
{
"id": "bad87fee1348bd9aec908847",
"title": "Split your Bootstrap Row",
"title": "Split Your Bootstrap Row",
"description": [
"Now that we have a Bootstrap Row, let's split it into two columns to house our elements.",
"Create two <code>div</code> elements within your row, both with the class <code>col-xs-6</code>."
@ -2090,7 +2090,7 @@
},
{
"id": "bad87fee1348bd9aec908849",
"title": "Add Elements within your Bootstrap Wells",
"title": "Add Elements within Your Bootstrap Wells",
"description": [
"Now we're several <code>div</code> elements deep on each column of our row. This is as deep as we'll need to go. Now we can add our <code>button</code> elements.",
"Nest three <code>button</code> elements within each of your <code>well</code> <code>div</code> elements."
@ -2243,7 +2243,7 @@
},
{
"id": "bad87fee1348bd9aec908853",
"title": "Add ID Attributes to Bootstrap Elements",
"title": "Add id Attributes to Bootstrap Elements",
"description": [
"Recall that in addition to class attributes, you can give each of your elements an <code>id</code> attribute.",
"Each id must be unique to a specific element and used only once per page.",
@ -2364,7 +2364,7 @@
},
{
"id": "bad87fee1348bd9aec908855",
"title": "Give Each Element a Unique ID",
"title": "Give Each Element a Unique id",
"description": [
"We will also want to be able to use jQuery to target each button by its unique id.",
"Give each of your buttons a unique id, starting with <code>target1</code> and ending with <code>target6</code>.",

16
challenges/03-front-end-libraries/jquery.json
View File

@ -11,7 +11,7 @@
"challenges": [
{
"id": "bad87fee1348bd9acdd08826",
"title": "Learn how Script Tags and Document Ready Work",
"title": "Learn How Script Tags and Document Ready Work",
"description": [
"Now we're ready to learn jQuery, the most popular JavaScript tool of all time. Don't worry about JavaScript itself - we will cover it soon.",
"Before we can start using jQuery, we need to add some things to our HTML.",
@ -281,7 +281,7 @@
},
{
"id": "bad87fee1348bd9aeda08826",
"title": "Target Elements by ID Using jQuery",
"title": "Target Elements by id Using jQuery",
"required": [
{
"link": "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css"
@ -337,7 +337,7 @@
"challengeType": 0,
"translations": {
"de": {
"title": "Elemente anhand der ID mit jQuery auswählen",
"title": "Elemente anhand der id mit jQuery auswählen",
"description": [
"Du kannst Elemente auch anhand deren ID-Attributs auswählen.",
"Wähle als erstes dein <code>Button</code> Element mit der ID <code>target3</code>, indem du den <code>$(\"#target3\")</code> Selektor nutzt.",
@ -348,7 +348,7 @@
]
},
"es": {
"title": "Elige elementos por ID usando jQuery",
"title": "Elige elementos por id usando jQuery",
"description": [
"También puedes elegir un elemento por su atributo id.",
"Primero selecciona tu elemento <code>button</code> con el id <code>target3</code> mediante el uso del selector <code>$(\"#target3\")</code>.",
@ -359,7 +359,7 @@
]
},
"fr": {
"title": "Cibler les éléments par ID avec jQuery",
"title": "Cibler les éléments par id avec jQuery",
"description": [
"Vous pouvez également cibler les éléments à l'aide de leurs attributs id.",
"Premièrement, cibler votre élément <code>button</code> avec l'id <code>target3</code> en utilisant le sélecteur <code>$(\"#target\")</code>.",
@ -373,7 +373,7 @@
},
{
"id": "bad87fee1348bd9aeda08726",
"title": "Delete your jQuery Functions",
"title": "Delete Your jQuery Functions",
"required": [
{
"link": "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css"
@ -452,7 +452,7 @@
},
{
"id": "bad87fee1348bd9aed908626",
"title": "Target the same element with multiple jQuery Selectors",
"title": "Target the Same Element with Multiple jQuery Selectors",
"required": [
{
"link": "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css"
@ -545,7 +545,7 @@
},
{
"id": "bad87fee1348bd9aed918626",
"title": "Remove Classes from an element with jQuery",
"title": "Remove Classes from an Element with jQuery",
"required": [
{
"link": "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css"

18
challenges/03-front-end-libraries/sass.json
View File

@ -25,7 +25,7 @@
},
{
"id": "587d7dbd367417b2b2512bb4",
"title": "Storing Data with Sass Variables",
"title": "Store Data with Sass Variables",
"required": [
{
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
@ -82,7 +82,7 @@
},
{
"id": "587d7dbd367417b2b2512bb5",
"title": "Nesting CSS with Sass",
"title": "Nest CSS with Sass",
"required": [
{
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
@ -129,7 +129,7 @@
},
{
"id": "587d7dbd367417b2b2512bb6",
"title": "Creating Reusable CSS with Mixins",
"title": "Create Reusable CSS with Mixins",
"required": [
{
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
@ -182,7 +182,7 @@
},
{
"id": "587d7dbe367417b2b2512bb8",
"title": "Using @if and @else.",
"title": "Use @if and @else to Add Logic To Your Styles",
"required": [
{
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
@ -229,7 +229,7 @@
},
{
"id": "587d7dbe367417b2b2512bb9",
"title": "Continuing with @for",
"title": "Use @for to Create a Sass Loop",
"required": [
{
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
@ -278,7 +278,7 @@
},
{
"id": "587d7dbf367417b2b2512bba",
"title": "Expanding with @each",
"title": "Use @each to Map Over Items in a List",
"required": [
{
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
@ -328,7 +328,7 @@
},
{
"id": "587d7dbf367417b2b2512bbb",
"title": "Wrapping up with @while",
"title": "Apply a Style Until a Condition is Met with @while",
"required": [
{
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
@ -387,7 +387,7 @@
},
{
"id": "587d7dbf367417b2b2512bbc",
"title": "Partials",
"title": "Split Your Styles into Smaller Chunks with Partials",
"required": [
{
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
@ -422,7 +422,7 @@
},
{
"id": "587d7fa5367417b2b2512bbd",
"title": "Extend your CSS styles",
"title": "Extend One Set of CSS Styles to Another Element",
"required": [
{
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",

4
challenges/04-data-visualization/data-visualization-with-d3.json
View File

@ -1478,7 +1478,7 @@
},
{
"id": "587d7fac367417b2b2512bdc",
"title": "Use the D3 Max and Min Functions",
"title": "Use the d3.max and d3.min Functions to Find Minimum and Maximum Values in a Dataset",
"required": [
{
"src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"
@ -1599,7 +1599,7 @@
},
{
"id": "587d7fac367417b2b2512bde",
"title": "Use a Pre-defined Scale to Place Elements",
"title": "Use a Pre-Defined Scale to Place Elements",
"required": [
{
"src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"

22
challenges/04-data-visualization/json-apis-and-ajax.json
View File

@ -1,5 +1,5 @@
{
"name": "JSON APIs and Ajax",
"name": "JSON APIs and AJAX",
"order": 2,
"time": "2 hours",
"helpRoom": "Help",
@ -11,12 +11,12 @@
"challenges": [
{
"id": "587d7fad367417b2b2512be0",
"title": "Introduction to the JSON APIs and Ajax Challenges",
"title": "Introduction to the JSON APIs and AJAX Challenges",
"description": [
[
"http://imgs.xkcd.com/comics/api.png",
"XKCD web comic with a user sitting at a computer reading the instructions for an API Guide for a site. The text below notes \"If you do things right, it can take people awhile to realize that your 'API documentation' is just instructions for how to look at your website.\"",
"Similar to how User Interfaces help people use programs, Application Programming Interfaces (APIs) help programs interact with other programs. APIs are tools that computers use to communicate with one another, in part to send and receive data. You can use API functionality in your page once you understand how to make requests and process data from it. Programmers often use Ajax technologies when working with APIs.<br><br>The term Ajax originated as an acronym for Asynchronous JavaScript And XML. It refers to a group of technologies that make asynchronous requests to a server to transfer data, then load any returned data into the page. An asynchronous process has a couple key properties. The browser does not stop loading a page to wait for the server's response. Also, the browser inserts updated data into part of the page without having to refresh the entire page.<br><br>User experience benefits from asynchronous processes in several ways. Pages load faster since the browser isn't waiting for the server to respond in the middle of a page render. Requests and transfers happen in the background, without interrupting what the user is doing. When the browser receives new data, only the necessary area of the page refreshes. These qualities especially enhance the user experience for single page applications.<br><br>The data transferred between the browser and server is often in a format called JavaScript Object Notation (JSON). JSON resembles JavaScript object literal syntax, except that it's transferred as a string. Once received, it can be converted into an object and used in a script.<br><br>This section covers how to transfer and use data using Ajax technologies with a freeCodeCamp API.",
"Similar to how User Interfaces help people use programs, Application Programming Interfaces (APIs) help programs interact with other programs. APIs are tools that computers use to communicate with one another, in part to send and receive data. You can use API functionality in your page once you understand how to make requests and process data from it. Programmers often use AJAX technologies when working with APIs.<br><br>The term AJAX originated as an acronym for Asynchronous JavaScript And XML. It refers to a group of technologies that make asynchronous requests to a server to transfer data, then load any returned data into the page. An asynchronous process has a couple key properties. The browser does not stop loading a page to wait for the server's response. Also, the browser inserts updated data into part of the page without having to refresh the entire page.<br><br>User experience benefits from asynchronous processes in several ways. Pages load faster since the browser isn't waiting for the server to respond in the middle of a page render. Requests and transfers happen in the background, without interrupting what the user is doing. When the browser receives new data, only the necessary area of the page refreshes. These qualities especially enhance the user experience for single page applications.<br><br>The data transferred between the browser and server is often in a format called JavaScript Object Notation (JSON). JSON resembles JavaScript object literal syntax, except that it's transferred as a string. Once received, it can be converted into an object and used in a script.<br><br>This section covers how to transfer and use data using AJAX technologies with a freeCodeCamp API.",
""
]
],
@ -30,10 +30,10 @@
},
{
"id": "587d7fad367417b2b2512be1",
"title": "Trigger Click Events with JavaScript",
"title": "Trigger click Events with JavaScript",
"description": [
"This section covers how to get data from APIs. APIs - or Application Programming Interfaces - are tools that computers use to communicate with one another.",
"You'll learn how to update HTML with the data we get from these APIs using a technology called Ajax.",
"You'll learn how to update HTML with the data we get from these APIs using a technology called AJAX.",
"You want your code to execute only once your page has finished loading. For that purpose, you can attach a JavaScript event to the document called <code>DOMContentLoaded</code>. Here's the code that does this:",
"<blockquote>document.addEventListener('DOMContentLoaded',function() {<br><br>});</blockquote>",
"Next, you can implement a click event handler that goes inside of the <code>DOMContentLoaded</code> function by adding the following code:",
@ -99,7 +99,7 @@
},
{
"id": "587d7fad367417b2b2512be2",
"title": "Change Text with Click Events",
"title": "Change Text with click Events",
"description": [
"When the click event happens, you can use JavaScript to update an HTML element.",
"For example, when a user clicks the \"Get Message\" button, it changes the text of the element with the class <code>message</code> to say \"Here is the message\".",
@ -181,7 +181,7 @@
"Next, the <code>open</code> method initializes a request - this example is requesting data from an API, therefore is a \"GET\" request. The second argument for <code>open</code> is the URL of the API you are requesting data from. The third argument is a Boolean value where <code>true</code> makes it an asynchronous request.",
"The <code>send</code> method sends the request. Finally, the <code>onload</code> event handler parses the returned data and applies the <code>JSON.stringify</code> method to convert the JavaScript object into a string. This string is then inserted as the message text.",
"<hr>",
"Update the code to create and send a \"GET\" request to the freeCodeCamp Cat Photo API. Then click the \"Get Message\" button. Your Ajax function will replace the \"The message will go here\" text with the raw JSON output from the API."
"Update the code to create and send a \"GET\" request to the freeCodeCamp Cat Photo API. Then click the \"Get Message\" button. Your AJAX function will replace the \"The message will go here\" text with the raw JSON output from the API."
],
"challengeSeed": [
"<script>",
@ -489,7 +489,7 @@
},
{
"id": "587d7fae367417b2b2512be7",
"title": "Pre-filter JSON",
"title": "Pre-filter JSON to Get the Data You Need",
"description": [
"If you don't want to render every cat photo you get from the freeCodeCamp Cat Photo API, you can pre-filter the JSON before looping through it.",
"Given that the JSON data is stored in an array, you can use the <code>filter</code> method to filter out the cat whose \"id\" key has a value of 1.",
@ -572,7 +572,7 @@
},
{
"id": "587d7faf367417b2b2512be8",
"title": "Get Geolocation Data",
"title": "Get Geolocation Data to Find A User's GPS Coordinates",
"description": [
"Another cool thing you can do is access your user's current location. Every browser has a built in navigator that can give you this information.",
"The navigator will get the user's current longitude and latitude.",
@ -613,7 +613,7 @@
"id": "587d7faf367417b2b2512be9",
"title": "Post Data with the JavaScript XMLHttpRequest Method",
"description": [
"In the previous examples, you received data from an external resource. You can also send data to an external resource, as long as that resource supports Ajax requests and you know the URL.",
"In the previous examples, you received data from an external resource. You can also send data to an external resource, as long as that resource supports AJAX requests and you know the URL.",
"JavaScript's <code>XMLHttpRequest</code> method is also used to post data to a server. Here's an example:",
"<blockquote>req=new XMLHttpRequest();<br>req.open(\"POST\",url,true);<br>req.setRequestHeader('Content-Type','text/plain');<br>req.onreadystatechange=function(){<br> if(req.readyState==4 && req.status==200){<br> document.getElementsByClassName('message')[0].innerHTML=req.responseText;<br> }<br>};<br>req.send(userName);</blockquote>",
"You've seen several of these methods before. Here the <code>open</code> method initializes the request as a \"POST\" to the given URL of the external resource, and uses the <code>true</code> Boolean to make it asynchronous.",
@ -621,7 +621,7 @@
"Next, the <code>onreadystatechange</code> event listener handles a change in the state of the request. A <code>readyState</code> of 4 means the operation is complete, and a <code>status</code> of 200 means it was a successful request. The document's HTML can be updated.",
"Finally, the <code>send</code> method sends the request with the <code>userName</code> value, which was given by the user in the <code>input</code> field.",
"<hr>",
"Update the code to create and send a \"POST\" request. Then enter your name in input box and click \"Send Message\". Your Ajax function will replace \"Reply from Server will be here.\" with the reply of the server. In this case, it is your name appended with \" loves cats\"."
"Update the code to create and send a \"POST\" request. Then enter your name in input box and click \"Send Message\". Your AJAX function will replace \"Reply from Server will be here.\" with the reply of the server. In this case, it is your name appended with \" loves cats\"."
],
"challengeSeed": [
"<script>",

14
challenges/05-apis-and-microservices/basic-node-and-express.json
View File

@ -51,7 +51,7 @@
},
{
"id": "587d7fb0367417b2b2512bee",
"title": "Start a working Express Server",
"title": "Start a Working Express Server",
"description": [
"In the first two lines of the file myApp.js you can see how it’s easy to create an Express app object. This object has several methods, and we will learn many of them in these challenges. One fundamental method is app.listen(<port>). It tells your server to listen on a given port, putting it in running state. You can see it at the bottom of the file. It is inside comments because for testing reasons we need the app to be running in background. All the code that you may want to add goes between these two fundamental parts. Gomix stores the port number in the environemet variable process.env.PORT. Its value is 3000.",
"Let’s serve our first string ! In Express, routes takes the following structure: app.METHOD(PATH, HANDLER). METHOD is an http method in lowercase. PATH is a relative path on the server (it can be a string, or even a regular expression). HANDLER is a function that Express calls when the route is matched.",
@ -77,7 +77,7 @@
},
{
"id": "587d7fb0367417b2b2512bef",
"title": "Serve an HTML file",
"title": "Serve an HTML File",
"description": [
"We can respond with a file using the method res.sendFile(<file>).",
"You can put it inside the app.get('/', ...) route handler. Behind the scenes this method will set the appropriate headers to instruct your browser on how to handle the file you want to send, according to its type. Then it will read and send the file. This method needs an absolute file-path. We recommend you to use the node global variable __dirname to calculate the path.",
@ -100,7 +100,7 @@
},
{
"id": "587d7fb0367417b2b2512bf0",
"title": "Serve Static assets",
"title": "Serve Static Assets",
"description": [
"An HTML server usually has one or more directories that are accessible by the user. You can place there the static assets needed by your application (stylesheets, scripts, images). In Express you can put in place this functionality using the middleware express.static(<public-dir-absolute_path>). If don’t know what a midleware is, don’t worry. We’ll discuss about it later in details. Basically middleware are function that intercept route handlers, adding some kind of information. A middleware needs to be mounted using the method app.use([optional-path], <mware function>). The first path argument is optional. If you don’t pass it, the middleware will be executed for all the requests.",
"Mount the express.static() middleware for all the requests with app.use(). The absolute path to the assets folder is __dirname + /public.",
@ -121,7 +121,7 @@
},
{
"id": "587d7fb1367417b2b2512bf1",
"title": "Serve JSON on a specific route",
"title": "Serve JSON on a Specific Route",
"description": [
"While an HTML server serves (you guessed it!) HTML, an API serves data. A <dfn>REST</dfn> (representational state transfer) API allows data exchange in a simple way, without the need for clients to know any detail about the server. The client only needs to know where the resource is (the URL), and the action it wants to perform on it (the verb). The GET verb is used when you are fetching some information, without modifying anything. These days, the preferred data format for moving information around the web is JSON. Simply put, JSON is a convenient way to represent a JavaScript object as a string, so it can be easily transmitted.",
"Let's create a simple API by creating a route that responds with JSON at the path <code>/json</code>. You can do it as usual, with the <code>app.get()</code> method. Inside the route handler use the method <code>res.json()</code>, passing in an object as an argument. This method closes the request-response loop, returning the data. Behind the scenes it converts a valid Javascript object into a string, then sets the appropriate headers to tell your browser that you are serving JSON, and sends the data back. A valid object has the usual structure <code>{key: data}</code>. Data can ba a number, a string, a nested object or an array. Data can also be a variable or the result of a function call; in which case it will be evaluated before being converted into a string.",
@ -142,7 +142,7 @@
},
{
"id": "587d7fb1367417b2b2512bf2",
"title": "Use the .env file",
"title": "Use the .env File",
"description": [
"The <code>.env</code> file is a hidden file that is used to pass environment variables to your application. This file is secret, no one but you can access it, and it can be used to store data that you want to keep private or hidden. For example, you can store API keys from external services or your database URI. You can also use it to store configuration options. By setting configuration options, you can change the behavior of your application, without the need to rewrite some code.",
"The environment variables are accessible from the app as <code>process.env.VAR_NAME</code>. The <code>process.env</code> object is a global Node object, and variables are passed as strings. By convention, the variable names are all uppercase, with words separated by an underscore. The <code>.env</code> is a shell file, so you don’t need to wrap names or values in quotes. It is also important to note that there cannot be space around the equals sign when you are assigning values to your variables, e.g. <code>VAR_NAME=value</code>. Usually, you will put each variable definition on a separate line.",
@ -163,7 +163,7 @@
},
{
"id": "587d7fb1367417b2b2512bf3",
"title": "Implement a Root-level Request Logger Middleware",
"title": "Implement a Root-Level Request Logger Middleware",
"description": [
"Before we introduced the express.static() middleware function. Now it’s time to see what middleware is, in more detail. Middleware functions are functions that take 3 arguments: the request object, the response object, and the next function in the application’s request-response cycle. These functions execute some code that can have side effects on the app, and usually add informations to the request or response objects. They can also end the cycle sending the response, when some condition is met. If they don’t send the response, when they are done they start the execution of the next function in the stack. This is triggered calling the 3rd argument next(). More information here in the express documentation.",
"Look at the following example :",
@ -279,7 +279,7 @@
},
{
"id": "587d7fb2367417b2b2512bf7",
"title": "Use Body-Parser to Parse POST Requests",
"title": "Use body-parser to Parse POST Requests",
"description": [
"Besides GET there is another common http verb , it is POST. POST is the default method used to send client data with HTML forms. In the REST convention POST is used to send data to create new items in the database (a new user, or a new blog post). We don’t have a database in this project, but we are going to learn how to handle POST requests anyway.",
"In these kind of request the data doesn’t appear in the URL, it is hidden in the request body. This is a part of the HTML request, also called payload. Since HTML is text based, even if you don’t see the data, it doesn’t mean that they are secret. The raw content of an HTTP Post is shown below:",

12
challenges/05-apis-and-microservices/managing-packages-with-npm.json
View File

@ -31,7 +31,7 @@
},
{
"id": "587d7fb3367417b2b2512bfb",
"title": "Using Package.json, The Core of Any Node.js Project or npm Package",
"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 <head>-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",
@ -117,7 +117,7 @@
},
{
"id": "587d7fb4367417b2b2512bfe",
"title": "Add a license to your package.json",
"title": "Add a License to Your package.json",
"description": [
"TODO: This challenge could be used to inspire more people to develop OSS - we should really improve this description.",
"The license-field is where you inform users of your project what they are allowed to do with it.",
@ -166,7 +166,7 @@
},
{
"id": "587d7fb4367417b2b2512c00",
"title": "Expand your project with external packages from npm",
"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:",
@ -233,7 +233,7 @@
},
{
"id": "587d7fb5367417b2b2512c02",
"title": "Use the tilde-character to always use the latest patch version of a dependency",
"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.",
@ -262,7 +262,7 @@
},
{
"id": "587d7fb5367417b2b2512c03",
"title": "Use the caret-character to use the latest minor version of a dependency",
"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.",
@ -291,7 +291,7 @@
},
{
"id": "587d7fb5367417b2b2512c04",
"title": "Remove a package from your dependencies",
"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.",

16
challenges/05-apis-and-microservices/mongodb-and-mongoose.json
View File

@ -117,7 +117,7 @@
},
{
"id": "587d7fb7367417b2b2512c0a",
"title": "Create Many Records with Model.create()",
"title": "Create Many Records with model.create()",
"description": [
"Sometimes you need to create many instances of your models, e.g. when seeding a database with initial data. Model.create() takes an array of objects like [{name: 'John', ...}, {...}, ...] as the first argument, and saves them all in the db. Create many people with Model.create(), using the function argument arrayOfPeople."
],
@ -136,7 +136,7 @@
},
{
"id": "587d7fb7367417b2b2512c0b",
"title": "Use Model.find()",
"title": "Use model.find() to Search Your Database",
"description": [
"Find all the people having a given name, using Model.find() -> [Person]",
"In its simplest usage, Model.find() accepts a query document (a JSON object ) as the first argument, then a callback. It returns an array of matches. It supports an extremely wide range of search options. Check it in the docs. Use the function argument personName as search key."
@ -156,7 +156,7 @@
},
{
"id": "587d7fb7367417b2b2512c0c",
"title": "Use Model.findOne()",
"title": "Use model.findOne() to Return a Single Matching Document from Your Database",
"description": [
"Model.findOne() behaves like .find(), but it returns only one document (not an array), even if there are items. It is especially useful when searching by properties that you have declared as unique. Find just one person which has a certain food in her favorites, using Model.findOne() -> Person. Use the function argument food as search key."
],
@ -175,7 +175,7 @@
},
{
"id": "587d7fb7367417b2b2512c0d",
"title": "Use Model.findById()",
"title": "Use model.findById() to Search Your Database By _id",
"description": [
"When saving a document, mongodb automatically adds the field _id, and set it to a unique alphanumeric key. Searching by _id is an extremely frequent operation, so moongose provides a dedicated method for it. Find the (only!!) person having a given _id, using Model.findById() -> Person. Use the function argument personId as search key."
],
@ -215,7 +215,7 @@
},
{
"id": "587d7fb8367417b2b2512c0f",
"title": "Perform New Updates Using Model.findOneAndUpdate()",
"title": "Perform New Updates on a Document Using model.findOneAndUpdate()",
"description": [
"Recent versions of mongoose have methods to simplify documents updating. Some more advanced features (i.e. pre/post hooks, validation) behave differently with this approach, so the Classic method is still useful in many situations. findByIdAndUpdate() can be used when searching by Id.",
"Find a person by Name and set her age to 20. Use the function parameter personName as search key.",
@ -236,7 +236,7 @@
},
{
"id": "587d7fb8367417b2b2512c10",
"title": "Delete one Record",
"title": "Delete One Document Using model.findByIdAndRemove",
"description": [
"Delete one person by her _id. You should use one of the methods findByIdAndRemove() or findOneAndRemove(). They are like the previous update methods. They pass the removed document to the cb. As usual, use the function argument personId as search key."
],
@ -255,7 +255,7 @@
},
{
"id": "587d7fb8367417b2b2512c11",
"title": "Delete Many Records with Model.remove()",
"title": "Delete Many Documents with model.remove()",
"description": [
"Model.remove() is useful to delete all the documents matching given criteria. Delete all the people whose name is “Mary”, using Model.remove(). Pass to it a query ducument with the “name” field set, and of course a callback.",
"Note: Model.remove() doesn’t return the deleted document, but a JSON object containing the outcome of the operation, and the number of items affected. Don’t forget to pass it to the done() callback, since we use it in tests."
@ -275,7 +275,7 @@
},
{
"id": "587d7fb9367417b2b2512c12",
"title": "Chain Search Query Helpers",
"title": "Chain Search Query Helpers to Narrow Search Results",
"description": [
"If you don’t pass the callback as the last argument to Model.find() (or to the other search methods), the query is not executed. You can store the query in a variable for later use. This kind of object enables you to build up a query using chaining syntax. The actual db search is executed when you finally chain the method .exec(). Pass your callback to this last method. There are many query helpers, here we’ll use the most ‘famous’ ones.",
"Find people who like \"burrito\". Sort them by name, limit the results to two documents, and hide their age. Chain .find(), .sort(), .limit(), .select(), and then .exec(). Pass the done(err, data) callback to exec()."

26
challenges/06-information-security-and-quality-assurance/advanced-express-tools.json
View File

@ -25,7 +25,7 @@
},
{
"id": "5895f700f9fc0f352b528e63",
"title": "Setting up a Template Engine",
"title": "Set up a Template Engine",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-advancednode/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-advancednode/'>GitHub</a>.",
"A template engine enables you to use static template files (such as those written in <em>Pug</em>) in your app. At runtime, the template engine replaces variables in a template file with actual values which can be supplied by your server, and transforms the template into a static HTML file that is then sent to the client. This approach makes it easier to design an HTML page and allows for displaying of variables on the page without needing to make an API call from the client.",
@ -57,7 +57,7 @@
},
{
"id": "5895f70bf9fc0f352b528e64",
"title": "Using a Template Engine's Powers",
"title": "Use a Template Engine's Powers",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-advancednode/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-advancednode/'>GitHub</a>.",
"One of the greatest features of using a template engine is being able to pass variables from the server to the template file before rendering it to HTML.",
@ -83,7 +83,7 @@
},
{
"id": "5895f70cf9fc0f352b528e65",
"title": "Setting up Passport",
"title": "Set up Passport",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-advancednode/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-advancednode/'>GitHub</a>.",
"It's time to set up <em>Passport</em> so we can finally start allowing a user to register or login to an account! In addition to Passport, we will use Express-session to handle sessions. Using this middleware saves the session id as a cookie in the client and allows us to access the session data using that id on the server. This way we keep personal account information out of the cookie used by the client to verify to our server they are authenticated and just keep the <em>key</em> to access the data stored on the server.",
@ -216,7 +216,7 @@
},
{
"id": "5895f70df9fc0f352b528e69",
"title": "Using Passport Strategies",
"title": "How to Use Passport Strategies",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-advancednode/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-advancednode/'>GitHub</a>.",
"In the index.pug file supplied there is actually a login form. It has previously been hidden because of the inline javascript <code>if showLogin</code> with the form indented after it. Before showLogin as a variable was never defined, it never rendered the code block containing the form. Go ahead and on the res.render for that page add a new variable to the object <code>showLogin: true</code>. When you refresh your page, you should then see the form! This form is set up to <b>POST</b> on <em>/login</em> so this is where we should set up to accept the POST and authenticate the user.",
@ -245,7 +245,7 @@
},
{
"id": "5895f70df9fc0f352b528e6a",
"title": "Creating New Middleware",
"title": "Create New Middleware",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-advancednode/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-advancednode/'>GitHub</a>.",
"As in, any user can just go to /profile whether they authenticated or not by typing in the url. We want to prevent this by checking if the user is authenticated first before rendering the profile page. This is the perfect example of when to create a middleware.",
@ -274,7 +274,7 @@
},
{
"id": "5895f70ef9fc0f352b528e6b",
"title": "Putting a Profile Together",
"title": "How to Put a Profile Together",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-advancednode/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-advancednode/'>GitHub</a>.",
"Now that we can ensure the user accessing the <em>/profile</em> is authenticated, we can use the information contained in 'req.user' on our page!",
@ -366,7 +366,7 @@
},
{
"id": "58a25c98f9fc0f352b528e7f",
"title": "Hashing your Passwords",
"title": "Hashing Your Passwords",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-advancednode/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-advancednode/'>GitHub</a>.",
"Going back to the information security section you may remember that storing plaintext passwords is <em>never</em> okay. Now it is time to implement BCrypt to solve this issue.",
@ -567,7 +567,7 @@
},
{
"id": "589fc830f9fc0f352b528e74",
"title": "Setting up the Enviroment",
"title": "Set up the Enviroment",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-socketio/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-socketio/'>GitHub</a>.",
"Add Socket.IO as a dependency and require/instanciate it in your server defined as 'io' with the http server as an argument. <code>const io = require('socket.io')(http);</code>",
@ -605,7 +605,7 @@
},
{
"id": "589fc831f9fc0f352b528e75",
"title": "Communicating by Emitting",
"title": "Communicate by Emitting",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-socketio/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-socketio/'>GitHub</a>.",
"<dfn>Emit</dfn> is the most common way of communicating you will use. When you emit something from the server to 'io', you send an event's name and data to all the connected sockets. A good example of this concept would be emiting the current count of connected users each time a new user connects!",
@ -639,7 +639,7 @@
},
{
"id": "589fc831f9fc0f352b528e76",
"title": "Handling a disconnect",
"title": "Handle a Disconnect",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-socketio/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-socketio/'>GitHub</a>.",
"You may notice that up to now you have only been increasing the user count. Handling a user disconnecting is just as easy as handling the initial connect except the difference is you have to listen for it on each socket versus on the whole server.",
@ -699,7 +699,7 @@
},
{
"id": "589fc832f9fc0f352b528e78",
"title": "Announcing New Users",
"title": "Announce New Users",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-socketio/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-socketio/'>GitHub</a>.",
"Many chat rooms are able to annouce when a user connects or disconnects and then display that to all of the connected users in the chat. Seeing as though you already are emitting an event on connect and disconnect, you will just have to modify this event to support such feature. The most logical way of doing so is sending 3 pieces of data with the event: name of the user connected/disconnected, the current user count, and if that name connected or disconnected.",
@ -727,7 +727,7 @@
},
{
"id": "589fc832f9fc0f352b528e79",
"title": "Sending and Displaying Chat Messages",
"title": "Send and Display Chat Messages",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-socketio/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-socketio/'>GitHub</a>.",
"It's time you start allowing clients to send a chat message to the server to emit to all the clients! Already in your client.js file you should see there is already a block of code handling when the messgae form is submitted! (<code>$('form').submit(function(){ /*logic*/ });</code>)",
@ -755,7 +755,7 @@
},
{
"id": "58a0b2caf9fc0f352b528e7a",
"title": "Continuing your Live Chat",
"title": "Continuing Your Live Chat",
"description": [
[
"",

30
challenges/06-information-security-and-quality-assurance/information-security-with-helmetjs.json
View File

@ -25,7 +25,7 @@
},
{
"id": "587d8247367417b2b2512c36",
"title": "Install and Require Helmet.js",
"title": "Install and Require Helmet",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-infosec/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-infosec/'>GitHub</a>.",
"Helmet helps you secure your Express apps by setting various HTTP headers. Install the package, then require it."
@ -46,7 +46,7 @@
},
{
"id": "587d8247367417b2b2512c37",
"title": "Hide potentially dangerous information using helmet.hidePoweredBy()",
"title": "Hide Potentially Dangerous Information Using helmet.hidePoweredBy()",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-infosec/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-infosec/'>GitHub</a>.",
"Hackers can exploit known vulnerabilities in Express/Node if they see that your site is powered by Express. X-Powered-By: Express is sent in every request coming from Express by default. The helmet.hidePoweredBy() middleware will remove the X-Powered-By header. You can also explicitly set the header to something else, to throw people off. e.g. app.use(helmet.hidePoweredBy({ setTo: 'PHP 4.2.0' }))"
@ -67,7 +67,7 @@
},
{
"id": "587d8247367417b2b2512c38",
"title": "Mitigate the risk of clickjacking - helmet.frameguard()",
"title": "Mitigate the Risk of Clickjacking with helmet.frameguard()",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-infosec/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-infosec/'>GitHub</a>.",
"Your page could be put in a <frame> or <iframe> without your consent. This can result in clickjacking attacks, among other things. Clickjacking is a technique of tricking a user into interacting with a page different from what the user thinks it is. This can be obtained executing your page in a malicious context, by mean of iframing. In that context a hacker can put a hidden layer over your page. Hidden buttons can be used to run bad scripts. This middleware sets the X-Frame-Options header. It restricts who can put your site in a frame. It has three modes: DENY, SAMEORIGIN, and ALLOW-FROM.",
@ -93,7 +93,7 @@
},
{
"id": "587d8247367417b2b2512c39",
"title": "Mitigate the risk of Cross Site Scripting (XSS) Attacks - helmet.xssFilter()",
"title": "Mitigate the Risk of Cross Site Scripting (XSS) Attacks with helmet.xssFilter()",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-infosec/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-infosec/'>GitHub</a>.",
"Cross-site scripting (XSS) is a frequent type of attack where malicious scripts are injected into vulnerable pages, with the purpose of stealing sensitive data like session cookies, or passwords.",
@ -118,7 +118,7 @@
},
{
"id": "587d8248367417b2b2512c3a",
"title": "Avoid inferring the response MIME type - helmet.noSniff()",
"title": "Avoid Inferring the Response MIME Type with helmet.noSniff()",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-infosec/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-infosec/'>GitHub</a>.",
"Browsers can use content or MIME sniffing to adapt to different datatypes coming from a response. They override the Content-Type headers to guess and process the data. While this can be convenient in some scenarios, it can also lead to some dangerous attacks. This middleware sets the X-Content-Type-Options header to nosniff. This instructs the browser to not bypass the provided Content-Type."
@ -139,7 +139,7 @@
},
{
"id": "587d8248367417b2b2512c3b",
"title": "Prevent IE from opening untrusted HTML - helmet.ieNoOpen()",
"title": "Prevent IE from Opening Untrusted HTML with helmet.ieNoOpen()",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-infosec/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-infosec/'>GitHub</a>.",
"Some web applications will serve untrusted HTML for download. Some versions of Internet Explorer by default open those HTML files in the context of your site. This means that an untrusted HTML page could start doing bad things in the context of your pages. This middleware sets the X-Download-Options header to noopen. This will prevent IE users from executing downloads in the trusted site’s context."
@ -160,7 +160,7 @@
},
{
"id": "587d8248367417b2b2512c3c",
"title": "Ask browsers to access your site via HTTPS only - helmet.hsts()",
"title": "Ask Browsers to Access Your Site via HTTPS Only with helmet.hsts()",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-infosec/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-infosec/'>GitHub</a>.",
"HTTP Strict Transport Security (HSTS) is a web security policy which helps to protect websites against protocol downgrade attacks and cookie hijacking. If your website can be accessed via HTTPS you can ask user’s browsers to avoid using insecure HTTP. By setting the header Strict-Transport-Security, you tell the browsers to use HTTPS for the future requests in a specified amount of time. This will work for the requests coming after the initial request.",
@ -187,7 +187,7 @@
},
{
"id": "587d8248367417b2b2512c3d",
"title": "Disable DNS Prefetching - helmet.dnsPrefetchControl()",
"title": "Disable DNS Prefetching with helmet.dnsPrefetchControl()",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-infosec/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-infosec/'>GitHub</a>.",
"To improve performance, most browsers prefetch DNS records for the links in a page. In that way the destination ip is already known when the user clicks on a link. This may lead to over-use of the DNS service (if you own a big website, visited by millions people…), privacy issues (one eavesdropper could infer that you are on a certain page), or page statistics alteration (some links may appear visited even if they are not). If you have high security needs you can disable DNS prefetching, at the cost of a performance penalty."
@ -208,7 +208,7 @@
},
{
"id": "587d8249367417b2b2512c3e",
"title": "Disable Client-Side Caching - helmet.noCache()",
"title": "Disable Client-Side Caching with helmet.noCache()",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-infosec/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-infosec/'>GitHub</a>.",
"If you are releasing an update for your website, and you want the users to always download the newer version, you can (try to) disable caching on client’s browser. It can be useful in development too. Caching has performance benefits, which you will lose, so only use this option when there is a real need."
@ -229,7 +229,7 @@
},
{
"id": "587d8249367417b2b2512c3f",
"title": "Set a Content Security Policy - helmet.contentSecurityPolicy()",
"title": "Set a Content Security Policy with helmet.contentSecurityPolicy()",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-infosec/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-infosec/'>GitHub</a>.",
"This challenge highlights one promising new defense that can significantly reduce the risk and impact of many type of attacks in modern browsers. By setting and configuring a Content Security Policy you can prevent the injection of anything unintended into your page. This will protect your app from XSS vulnerabilities, undesired tracking, malicious frames, and much more. CSP works by defining a whitelist of content sources which are trusted. You can configure them for each kind of resource a web page may need (scripts, stylesheets, fonts, frames, media, and so on…). There are multiple directives available, so a website owner can have a granular control. See HTML 5 Rocks, KeyCDN for more details. Unfortunately CSP in unsupported by older browser.",
@ -256,7 +256,7 @@
},
{
"id": "587d8249367417b2b2512c40",
"title": "The ‘parent’ helmet() middleware",
"title": "Configure Helmet Using the ‘parent’ helmet() Middleware",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-infosec/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-infosec/'>GitHub</a>.",
"app.use(helmet()) will automatically include all the middleware introduced above, except noCache(), and contentSecurityPolicy(), but these can be enabled if necessary. You can also disable or configure any other middleware individually, using a configuration object.",
@ -291,7 +291,7 @@
},
{
"id": "58a25bcef9fc0f352b528e7b",
"title": "Data Protection with BCrypt",
"title": "Protect Your Data with BCrypt",
"description": [
[
"",
@ -321,7 +321,7 @@
},
{
"id": "58a25bcef9fc0f352b528e7c",
"title": "Understanding BCrypt Hashes",
"title": "Understand BCrypt Hashes",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-bcrypt/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-bcrypt/'>GitHub</a>.",
"BCrypt hashes are very secure. A hash is basically a fingerprint of the original data- always unique. This is accomplished by feeding the original data into a algorithm and having returned a fixed length result. To further complicate this process and make it more secure, you can also <em>salt</em> your hash. Salting your hash involves adding random data to the original data before the hashing process which makes it even harder to crack the hash.",
@ -349,7 +349,7 @@
},
{
"id": "58a25bcff9fc0f352b528e7d",
"title": "Hashing and Comparing Asynchronously",
"title": "Hash and Compare Passwords Asynchronously",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-bcrypt/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-bcrypt/'>GitHub</a>.",
"As hashing is designed to be computationally intensive, it is recommended to do so asyncronously on your server as to avoid blocking incoming connections while you hash. All you have to do to hash a password asynchronous is call <code>bcrypt.hash(myPlaintextPassword, saltRounds, (err, hash) => { /*Store hash in your db*/ });</code>",
@ -374,7 +374,7 @@
},
{
"id": "58a25bcff9fc0f352b528e7e",
"title": "Hashing and Comparing Synchronously",
"title": "Hash and Compare Passwords Synchronously",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-bcrypt/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-bcrypt/'>GitHub</a>.",
"Hashing synchronously is just as easy to do but can cause lag if using it server side with a high cost or with hashing done very often. Hashing with this method is as easy as calling <code>var hash = bcrypt.hashSync(myPlaintextPassword, saltRounds);</code>",

20
challenges/06-information-security-and-quality-assurance/quality-assurance-and-testing-with-chai.json
View File

@ -54,7 +54,7 @@
},
{
"id": "587d824b367417b2b2512c47",
"title": "Test whether a Variable or Function is Defined",
"title": "Test if a Variable or Function is Defined",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-mochachai/'>GitHub</a>.",
"Use assert.isDefined() or assert.isUndefined() to make the tests pass"
@ -299,7 +299,7 @@
},
{
"id": "587d824c367417b2b2512c4e",
"title": "Test whether one Value is Below or At Least as Large as Another",
"title": "Test if One Value is Below or At Least as Large as Another",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-mochachai/'>GitHub</a>.",
".isBelow() => a < b , .isAtLeast => a >= b"
@ -336,7 +336,7 @@
},
{
"id": "587d824c367417b2b2512c4f",
"title": "Test whether a Value Falls within a Specific Range",
"title": "Test if a Value Falls within a Specific Range",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-mochachai/'>GitHub</a>.",
".approximately",
@ -369,7 +369,7 @@
},
{
"id": "587d824d367417b2b2512c50",
"title": "Test whether a Value is an Array",
"title": "Test if a Value is an Array",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-mochachai/'>GitHub</a>."
],
@ -397,7 +397,7 @@
},
{
"id": "587d824d367417b2b2512c51",
"title": "Test whether an Array Contains an Item",
"title": "Test if an Array Contains an Item",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-mochachai/'>GitHub</a>."
],
@ -425,7 +425,7 @@
},
{
"id": "587d824d367417b2b2512c52",
"title": "Test whether a Value is a String",
"title": "Test if a Value is a String",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-mochachai/'>GitHub</a>.",
"#isString asserts that the actual value is a string."
@ -458,7 +458,7 @@
},
{
"id": "587d824d367417b2b2512c53",
"title": "Test whether a String Contains a Substring",
"title": "Test if a String Contains a Substring",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-mochachai/'>GitHub</a>.",
"#include (on #notInclude ) works for strings too !!",
@ -518,7 +518,7 @@
},
{
"id": "587d824e367417b2b2512c55",
"title": "Test whether an Object has a Property",
"title": "Test if an Object has a Property",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-mochachai/'>GitHub</a>.",
"#property asserts that the actual object has a given property.",
@ -552,7 +552,7 @@
},
{
"id": "587d824e367417b2b2512c56",
"title": "Test whether a Value is of a Specific Data Structure Type",
"title": "Test if a Value is of a Specific Data Structure Type",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-mochachai/'>GitHub</a>.",
"#typeOf asserts that value’s type is the given string, as determined by Object.prototype.toString.",
@ -594,7 +594,7 @@
},
{
"id": "587d824e367417b2b2512c57",
"title": "Test whether an Object is an Instance of a Constructor",
"title": "Test if an Object is an Instance of a Constructor",
"description": [
"As a reminder, this project is being built upon the following starter project on <a href='https://gomix.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/'>Gomix</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-mochachai/'>GitHub</a>.",
"#instanceOf asserts that an object is an instance of a constructor.",

2
challenges/07-contribute-to-open-source-and-help-nonprofits/contribute-to-open-source-and-help-nonprofits.json
View File

@ -22,7 +22,7 @@
"isRequired": true
},
{
"title": "Claim your Full Stack Development Certificate"
"title": "Claim Your Full Stack Development Certificate"
}
]
}

8
challenges/08-coding-interview-questions-and-take-home-assignments/coding-interview-data-structure-questions.json
View File

@ -674,7 +674,7 @@
},
{
"id": "587d8254367417b2b2512c70",
"title": "Creating and Adding to Sets in ES6",
"title": "Create and Add to Sets in ES6",
"description": [
"Now that you have worked through ES5, you are going to perform something similar in ES6. This will be considerably easier. ES6 contains a built-in data structure <code>Set</code> so many of the operations you wrote by hand are now included for you. Let's take a look:",
"To create a new empty set:",
@ -713,7 +713,7 @@
},
{
"id": "587d8254367417b2b2512c71",
"title": "Removing items from a set in ES6",
"title": "Remove items from a set in ES6",
"description": [
"Now we will see how we can remove items from an ES6 Set.",
"Let's create a Set:",
@ -743,7 +743,7 @@
},
{
"id": "587d8255367417b2b2512c72",
"title": "Using .has and .size on an ES6 Set",
"title": "Use .has and .size on an ES6 Set",
"description": [
"Now we will look at the .has and .size methods available on the Set object.",
"var set = new Set([1,2,3]);",
@ -772,7 +772,7 @@
},
{
"id": "587d8255367417b2b2512c73",
"title": "Using Spread and Notes for ES5 Set() Integration",
"title": "Use Spread and Notes for ES5 Set() Integration",
"description": [
"Next up is one of the coolest things in ES6!",
"The noble spread operator! '...' can take iterable objects in ES6 and turn them into arrays",