Question:
Describe your problem and how to reproduce it: Solution to this challenge doesn't take into account that: Three-or-more-character usernames with a single alphabet letter character at the beginning are obviously the solution as well. Add a Link to the page with the problem: Tell us about your browser and operating system: Browser Name: Google Chrome Browser Version: Version 71.0.3578.98 (Official Build) (64-bit) Operating System: Ubuntu Mate 16.04 LTS If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box):
I suggest this solution: Obviously, my solution uses positive lookahead (studied few challenges forward in the curriculum).
If my understanding is correct, from this description: "1) The only numbers in the username have to be at the end. There can be zero or more of them at the end." it sounds like you cannot mix letters and digits together. So if you have 3 or more letters, but only 1 at the beginning, that means that the rest have to be mixed with other numbers, and this is the reason is not covered in the solution. The fact that your solution passes, could be an issue in the test cases maybe. What do you think? I am willing to fix this once we can decide whether the description & solutions are wrong, or the test cases.
I mistakenly wrote letter instead of character in three-or-more-character. I corrected it. You can check my solution in a website like regexr with the examples of usernames. Thanks for showing interest!
This challenge was recently updated. The solution to the challenge file... This can be put in the guide.

## Solution: ```javascript let username = "JackOfAllTrades"; <del> let userCheck = /^[a-z]{2,}d*$/i; </del> <ins> const userCheck = /^[a-z]([0-9]{2,}|[a-z]+d*)$/i; </ins> let result = userCheck.test(username); ``` ## Explain: <del> 1. The only numbers in the username have to be at the end. `d$` There can be zero or more of them at the end. `*` ```javascript /d*$/; ``` 2. Username letters can be lowercase and uppercase. `i` ```javascript /d*$/i; ``` 3. Usernames have to be at least two characters long. `{2,}` A two-letter username can only use alphabet letter characters. `^[a-z]` ```javascript /^[a-z]{2,}d*$/i; ``` </del> <ins> 1. `^` - start of input 2. `[a-z]` - first character is a letter 3. `[0-9]{2,0}` - ends with two or more numbers 4. `|` - or 5. `[a-z]+` - has one or more letters next 6. `d*` - and ends with zero or more numbers 7. `$` - end of input 8. `i` - ignore case of input </ins>


Question:
Describe the bug On retina displays, this is what Learn's search navbar looks like on retina displays (2012 and beyond Macbooks): <img width="1064" alt="welcometolearnfreecodecamp" src="https://user-"Note that the Guide's navbar looks fine on Retina displays: <img width="1222" alt="freecodecamp_guide" src="https://user-"To Reproduce Steps to reproduce the behavior: to '...' on '....' down to '....' error Expected behavior A clear and concise description of what you expected to happen. Screenshots If applicable, add screenshots to help explain your problem. Desktop (please complete the following information): OS: [e.g. iOS] Browser [e.g. chrome, safari] Version [e.g. 22] Smartphone (please complete the following information): Device: [e.g. iPhone6] OS: [e.g. iOS8.1] Browser [e.g. stock browser, safari] Version [e.g. 22] Additional context Add any other context about the problem here.
sorry, I believe this is due to some of the changes I made way back in Fortunately, I don't think this was brought over into the monorepo. Does the navbar look like that when the site is running locally?
Yes - the navbar still looks slightly offset on my retina display when running locally: <img width="1187" alt="welcometolearnfreecodecamp" src="https://user-"The search field is way too wide, too, though that probably deserves a separate issue
sorry about that! Will take another crack at fixing the search bar soon.
Hi Thanks for working on this. Please let me know when you have the PR ready so we could review and merge it ASAP.
sorry for the delay with this! Been flying a bit blind since I don't have a Retina screen device of my own. Ended up using some kiosk MacBooks and playing with the CSS in the browser. Could only test with Safari, but I suspect that this is caused by the search bar having an undefined height. I'm just about to submit a PR, so could you and check it out when you can?

.fcc_searchBar { flex-grow: 1; padding: 0 10px; <ins> max-height: 33px; </ins> } .fcc_searchBar .ais-SearchBox-input,


Question:
There is a disparity between the current Legacy Data Vis Cert ID and what was once the Data Vis Cert at the beginning of 2018. Legacy Cert id for Data Viz: (on master) Legacy Data Vis Cert id found in some user records:
I did some related investigating on this...
I think there is a similar problem with fullstack certs. I am curious, how did you find out they were different?

if (user[certType]) { const { completedChallenges = [] } = user; <del> const { completedDate = new Date() } = _.find(completedChallenges, ({ id }) => certId === id) || {}; </del> <ins> const certChallenge = _.find( completedChallenges, ({ id }) => certId === id ); let { completedDate = new Date() } = certChallenge || {}; // the challange id has been rotated for isDataVisCert // so we need to check for id 561add10cb82ac38a17513b3 if (certType === 'isDataVisCert' && !certChallenge) { console.log('olderId'); let oldDataVisIdChall = _.find( completedChallenges, ({ id }) => '561add10cb82ac38a17513b3' === id ); if (oldDataVisIdChall) { completedDate = oldDataVisIdChall.completedDate || completedDate; } } </ins> const { username, name } = user; return res.json({


Question:
<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --Describe your problem and how to reproduce it: Challenge test text typically capitalized, but the one for Cascading CSS Variables is not. Add a Link to the page with the problem: Live: Suggested Change: Tell us about your browser and operating system: Browser Name: Chrome Browser Version: Chrome Operating System: Chrome OS
Hello can I work on this issue? I'd like to start contributing. kind regards!
Go for it! Thanks for giving us a hand! You will need to follow the to set up freeCodeCamp locally. Also, we are hanging out in . You can ask for help there, or just come say hi :)
Thanks, yeah sure, see you at Glitter's Contributors chatroom
is it fixed ? i would like to contribute
there has been a pull request already submitted Thanks for your interest! Please take a look at the other issues. Happy coding!
Close the issue?

```yml tests: <del> - text: declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>. testString: assert(code.match(/:roots*?{[sS]*--penguin-bellys*?:s*?pinks*?;[sS]*}/gi), 'declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.'); </del> <ins> - text: Declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>. testString: assert(code.match(/:roots*?{[sS]*--penguin-bellys*?:s*?pinks*?;[sS]*}/gi), 'Declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.'); </ins> ```


Question:
Good day, everybody! Hopefully you have had a great day so far :) I want to mention a possibility for improvement. In the lesson the task is: The code editor has a CSS rule to style all tags black. Add a rule so that when the user hovers over the tag, the is blue. The code window shows: The lesson doesn't allow to solve this task using HexCode: I think that this solution (and others; I tested rgb and rgba and both don't work as well) should be allowed as the code already entered suggests using this way of expressing "blue" and the task itself doesn't state anything about how to express it. Hex code and other ways of expressing "blue" were taught already at this point. ! michael-wise pointed this already out in the FCC forum. A bot referred him to GitHub, but I was unable to locate the issue here. Of course, this is just a minor issue, but I hope this nevertheless helps! All the best, Leo
I see what you mean - the test checks if the solution contains 'a:hover {color: blue}', not if the link actually turns blue. I'll see what I can do.

- text: The anchor tag color should remain black, only add CSS rules for the :hover state. testString: assert($('a').css('color') == 'rgb(0, 0, 0)', 'The anchor tag color should remain black, only add CSS rules for the :hover state.'); - text: The anchor tag should have a color of blue on hover.  testString: assert(code.match(/a:hovers*?{s*?color:s*?blue;s*?}/gi), 'The anchor tag should have a color of blue on hover.');   testString: assert(code.match(/a:hovers*?{s*?color:s*?(blue|rgba(s*?0s*?,s*?0s*?,s*?255s*?,s*?1s*?)|#00F|rgb(s*?0s*?,s*?0s*?,s*?255s*?))s*?;s*?}/gi), 'The anchor tag should have a color of blue on hover.');  ```

## Solution
  ```js // solution required </del> <ins> ```html  CatPhotoApp  ```


Question:
Describe the bug After downloading the solution, pressing the shortcut (Ctrl + Enter) should take us to the next challenge. However, it also downloads the solution. To Reproduce Steps to reproduce the behavior: a challenge on "Run the Tests" (Assuming you have passed the test cases), a modal window appears with 2 options - "Submit and go to next challenge(Ctrl + Enter)" and "Download my solution" on "Download my solution", which will download the solution in json format Ctrl + Enter is downloaded again are taken to the next challenge Expected behavior On pressing Ctrl + Enter after downloading the solution, we should be taken to the next challenge as it is the shortcut for "Submit and go to next challenge(Ctrl + Enter)". It should not download the solution again. Desktop (please complete the following information): OS: Windows 10 Home Browser: Chrome Version: 71.0.3578.98
I could reproduce the bug, and I'd like to try to fix this. Could someone help point me in the right direction?
i was also thinking of working on this issue. Would you like to work on this together? I am new to this repository as well
sure! That'll be great.
This issue happens provided the person is signed in to FCC. This bug does not happen when the user is signed out

close: () => dispatch(closeModal('completion')), handleKeypress: e => { if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) { <ins> e.preventDefault(); </ins> dispatch(submitChallenge()); } },


Question:
Clicking on link in the code preview (for example on "The Garfield Files") opens up web page with all three modules again (Coding Challenge, Code field, Code preview). ! ! I don't know, if this is challenge specific.  Link to the page with the problem: Tell us about your browser and operating system: Browser Name: Firefox Browser Version: Firefox for Linux Mint 1.0 Operating System: Linux Mint 18.3
This is due to how the rendering engine for our curriculum works. If you try this on a stand alone webpage, it won't happen.
Thank you for the explanation May I ask, how I could open it on a stand alone web page? Could we maybe improve the issue, by inserting a dead link instead of leaving it empty?
When I say stand alone web page I mean the you copy the html part out from the FCC paste it in another new file on you PC and run. What we can do is make a PR so that the href contains and not , that fixes it
That is a valuable piece of information, thank you! I will create the PR immediately.

The Garfield Files: Lasagna as Training Fuel?

The Garfield Files: Lasagna as Training Fuel?

The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...

Is Chuck Norris a Cat Person?

Is Chuck Norris a Cat Person?

Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...


Question:
! !
It is always best if you post an actual link to the challenge also. Thank you.
Here is the URL. Babar Khan
I would love to fix that issue, could I?
Sure. You will need to setup and test your changes locally.
How to setup ?
Start by taking a look at . If you have further questions or run into any problems, check out our . You can post your questions there and someone will get back with you.
Thank you all for reporting and helping to resolve this issue.
Babar Khan

## Description
  You may recall from Comparison with the Equality Operator that all comparison operators return a boolean true or false value.   You may recall from Comparison with the Equality Operator that all comparison operators return a boolean true or false value.  Sometimes people use an if/else statement to do a comparison, like this:
function isEqual(a,b) {
  if (a === b) {
    return true;
  } else {
    return false;
  }
}
 But there's a better way to do this. Since === returns true or false, we can return the result of the comparison:


Question:
<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --Describe your problem and how to reproduce it: In some of the take home projects there is a broken link in the description - - which leads to a 404. Add a Link to the page with the problem:
Here is a breakup of the action items (can be done in parallel, by multiple contributors): . we were hoping you could point us in the right direction by helping us with the source code repo link? [ ] This Glitch project can then be published and the challenge updated with the link and the verbiage. [ ] Finally we would also need to point the link for getting started use our standard intro for other projects.
if I have the original challenge link I could start on this.
I would like to work on this .
please let me know if you are still interested in making a pull request for this issue.
Please inform on the status of the work on this issue, otherwise I would like to have a go at it.
I would like to know the status. Do we have the correct link available or not?
What is the original challenge link which attempts to link to?
please let me know once the actual link is confirmed. I would like to work on this issue.
I'm not sure where the original link is. I thought it was in Apis And Microservices in the legacy site, but I can't find it. We may have to re-create this page? It is supposed to let users know how to create a repository and deploy to heroku. For some of these apps, users can also just use glitch.
It has to be somewhere in the history on Github. When using Git, it is not possible to lose content.
I'm not sure the very latest instance of the file, but it's the best I could find. If there's a way to find the latest version, I'd love to know how! Regardless, you might be able to get some inspiration from there, but unfortunately the specifics are all out of date.
That link is in four of the take home project descriptions - I didn't see it anywhere else. Maybe we should just remove that line from them... Note that for each project, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit
Yes please.

## Description
 Objective: Build a full stack JavaScript app that is functionally similar to this: http://whatsgoinontonight.herokuapp.com/ and deploy it to Heroku.  Note that for each project, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects.  Here are the specific user stories you should implement for this project: User Story: As an unauthenticated user, I can view all bars in my area. User Story: As an authenticated user, I can add myself to a bar to indicate I am going there tonight.

## Description
 Objective: Build a full stack JavaScript app that is functionally similar to this: https://fcc-voting-arthow4n.herokuapp.com/ and deploy it to Heroku.  Note that for each project, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects.  Here are the specific user stories you should implement for this project: User Story: As an authenticated user, I can keep my polls and come back later to access them. User Story: As an authenticated user, I can share my polls with my friends.

## Description
 Objective: Build a full stack JavaScript app that allows you to search for images like this: https://cryptic-ridge-9197.herokuapp.com/api/imagesearch/lolcats%20funny?offset=10 and browse recent search queries like this: https://cryptic-ridge-9197.herokuapp.com/api/latest/imagesearch/. Then deploy it to Glitch.  Note that for each project, you should create a new GitHub repository and a new Glitch project. If you can't remember how to do this, revisit https://freecodecamp.org/challenges/get-set-for-our-api-development-projects.  Here are the specific user stories you should implement for this project: User Story: I can get the image URLs, alt text and page urls for a set of images relating to a given search string. User Story: I can paginate through the responses by adding a ?offset=2 parameter to the URL.

## Description
 Objective: Build a full stack JavaScript app that is functionally similar to this: http://watchstocks.herokuapp.com/ and deploy it to Heroku.  Note that for each project, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects.  Here are the specific user stories you should implement for this project: User Story: I can view a graph displaying the recent trend lines for each added stock. User Story: I can add new stocks by their symbol name.


 Sometimes you won't (or don't need to) know the exact characters in your patterns. Thinking of all words that match, say, a misspelling would take a long time. Luckily, you can save time using the wildcard character: . The wildcard character . will match any one character. The wildcard is also called dot and period. You can use the wildcard character just like any other character in the regex. For example, if you wanted to match "hug", "huh", "hut", and "hum", you can use the regex /hu./ to match all four words.
let humStr = "I'll hum a song";
let hugStr = "Bear hug";
let huRegex = /hu./;
humStr.match(huRegex); // Returns ["hum"]
hugStr.match(huRegex); // Returns ["hug"]

let humStr = "I'll hum a song";
let hugStr = "Bear hug";
let huRegex = /hu./;
humStr.test(huRegex); // Returns true
hugStr.test(huRegex); // Returns true

 ## Instructions


Question:
<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --Describe your problem and how to reproduce it: The description of the problem and the solution that passes are not the same. The code that passes this section would give you the wrong answer to the instructions. write the proper code for the instructions and it will not pass. try it. Add a Link to the page with the problem: Tell us about your browser and operating system: Browser Name: CHROME Browser Version: Version 71.0.3578.98 Operating System: OSX If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box):
Can you be more specific? For example, what code passes the challenge which you think goes against the instructions?
I just came up with this solution based on the instructions and passed the test cases. ! After thinking about it more I can see how the instructions might be misleading. The following code pushes the number 10 to myArray, and i will be equal to 11 when the code finishes running, but the array equals [5, 6, 7, 8, 9, 10]. It might be less confusing if the instructions said "Change the loop in the code to a loop so that the loop will push only the number 10 to , and will be equal to when your code finishes running. !
the first pic is the way i tried it first and it wouldn't pass. i got it to pass changing the while: } while (i < 5); that should not have passed. i also had a few connection issues with that one. like i clicked on run test and the page would lockup. i would close my browser, reopen it, go to your page, click on curriculum, and it gave me a 404 error message a few times. Have a great day! Jeremiah Kalb
The code should definitely pass the tests, because you just need the loop to iterate one time. So, the while loop condition should evaluate to in the first iteration (which it does with that code). If you start with the original seeded code, is and not , so it is not going to add other numbers anyway. That being said, the wording change you suggest might not be a bad idea. Would you be interested in creating a PR for this change you suggest?
I would love to do that.
How's your PR coming along?
I'm pretty sure I finished with it. Is there anything else I need to do with it? The correct PR is
this how i got mine to pass // Setup const myArray = []; let i = 10; // Only change code below this line do { (i); i++; } while (1 < 0);

## Instructions
  Change the while loop in the code to a do...while loop so that the loop will push the number 10 to myArray, and i will be equal to 11 when your code finishes running.   Change the while loop in the code to a do...while loop so that the loop will only push the number 10 to myArray, and i will be equal to 11 when your code finishes running.
 ## Tests


Question: Describe the bug When you open a dropdown for any of the certificate, if the subtopic has 3 digit number of challenges it gets pushed to the next line. I think that it would be better if kept in same line. Screenshots ! !

.map-title-completed { margin-left: auto; <del> width: 90px; </del> <ins> width: 100px; </ins> padding-left: 20px; }


Question:
!
Could you give a link to the page as then it might be easier to solve the issue?
This should be the case on the user's profile page. You can reproduce by setting the certificate keys to true in the user object.
I could work on this!
I am already working on it.
Thanks for letting me know!
a reasonable fix would be to give the grid that contains the profile a class and on the css, change the button under that class and have . you will end up with something like this. here it is on small and large screens <img width="681" alt="screen shot 2019-02-22 at 2 18 10 pm" src="https://user-"<img width="1095" alt="screen shot 2019-02-22 at 2 17 53 pm" src="https://user-"
Similar solution could be applied to these donate buttons probably. but the selectors should be very specific not to change the styling on other buttons in the platform. <img width="669" alt="screen shot 2019-02-23 at 2 09 14 pm" src="https://user-"<img width="502" alt="screen shot 2019-02-23 at 2 08 51 pm" src="https://user-"
Hey or Can you take this up? just updated us that he will be a bit busy with other things.
I'm on it

.donation-form { display: flex; flex-direction: column; <del> width:80%; </del> <ins> width: 80%; </ins> justify-content: center; margin: 0 auto; }

font-weight: normal; } <ins> .donation-form .btn { white-space: normal; } </ins> .modal-close-btn-container { display: flex; justify-content: center;

.StripeElement--focus { border-color: #66afe9; outline: 0; <del> box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); </del> <ins> box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); </ins> }

import { userByNameSelector } from '../../../redux'; import FullWidthRow from '../../helpers/FullWidthRow'; import { ButtonSpacer, Spacer } from '../../helpers'; <ins> import './certifications.css'; </ins> const mapStateToProps = (state, props) => createSelector(

return cert.show ? ( <Fragment key={cert.title}> <Row> <del> <Col sm={10} smPush={1}> </del> <ins> <Col className='certifications' sm={10} smPush={1}> </ins> <Link to={`/certification/${username}/${cert.showURL}`}> <Button block={true}

}) { const renderCertShowWithUsername = curry(renderCertShow)(username); return (  <FullWidthRow>   <FullWidthRow className='certifications'>
freeCodeCamp Certifications

 {hasModernCert ? (

<ins> .certifications .btn { white-space: normal; } </ins>


Question:
the text is touching the edges of the screen when the screen is between 650 and 750 pixels. Probably needs to wrapped in a grid container but not sure. <img width="706" alt="screen shot 2019-02-19 at 9 10 15 am" src="https://user-"
I have created PR to fix this. There was a media query that sets padding for small sizes (<630px device width). So I just padding for larger devices.

align-items: center; max-width: 960px; margin: 0 auto; <ins> padding: 0 20px; </ins> } @media screen and (max-width: 630px) { .learn-page-wrapper { <del> padding: 0 25px; </del> <ins> padding: 0 15px; </ins> } }


Question:
Not all of the challenges listed in were fixed by . This issue is for the remaining challenges that the aforementioned PR did not modify. The tests for various challenges are too strict about line breaks before method calls. E.g. something like this passes: But this causes the tests to fail: :: Browser Name: Firefox Developer Edition Browser Version: 66.0b9 Operating System: Antergos Linux
I am looking into it
Hi Randel, Do you think something like would help? My concern is, that it would remove spaces in actual strings (if any inside of the code). Shall we move in this direction (means ) or different?
Yes, that is more like what I am thinking. You have valid concerns concerning removing spaces in actual strings. In challenges that do not have specific code strings in the element, we should be fine, so for these specific challenges we could maybe use a helper function like: Then we could use it in the like the following for the or better yet, move the helper function into a special within the with id="html-teardown" like: html <scriptwindow.removeWhiteSpace = str =str.replace(/s/g, ''); </script` and then the test would look cleaner: Lastly, most of the challenges are missing a valid full working solution in the section of the challenge file. The solutions are used to validate the tests still allow a valid solution to pass.
Shall I create PR with changes based on your suggestion for these two specific challenges? Shall we consider to apply the same fix for other challenges? Do you think putting a helper function into section is robust enough at the current moment?
After thinking even more about this, I am going to check with a few other collaborators to see if we already have access to a minifier library we could use instead. If that is the case, then I will let you know how we can use it instead. Then we would not have to worry about accidentally removing white space from code which actually needs to be a part of a string or something. Again, this is not an issue for these particular challenges, but I would rather use something that could be a model for how to best write tests for these types of challenges in the future. Give me a day to get back with you.
I agree. Thanks for the updates. Looking forward to hearing from you
I have asked who has a very solid understanding of what helper utilities to which we have access.
Any updates on this or shall we use approach described above?
We have concluded for now, we will have to write our own as they do not want to add another package to the library. I think we should actually consider how we can test these types of challenges without resorting to using regex. For example, we should be validating that the code written actual returns the correct JSON response. That is the true test. We might look for a few key methods with regex, but not complete lines of code.

```yml tests: - text: Your code should use bracket and dot notation to access the proper code name, and print "Loki" to the console. <del> testString: assert(code.match(/(?:json[2].codeNames[1]|json[2][('|")codeNames1][1])/g)); </del> <ins> testString: assert(code.match(/consoles*.s*logs*(s*jsons*[2]s*(.s*codeNames|[s*('|`|")codeNames2s*])s*[s*1s*]s*)/g)); </ins> ```


Question:
Looking for anyone proficient with C/C++ to review the imperative and declarative implementations of the algorithm in . Ideally, any person reading the guide should be able to copy this code into a file or site like and be able to compile and run the code as-is - perhaps adding a function and a test array would help make this work and help users understand better. please add any additional comments/concerns you would like addressed as well.
I already have a link that I made to test the recursive selection sort implementation snippet in that file by a PR. This link has the working code with a test array and output logs. I'll make a PR with the code I have. Since the iterative implementation just provides the body of the loop, I think I can create a function for the iterative version, and make my "main" call this too, thereby demonstrating both approaches.

### Implementation in C/C++ <del> #### Iterative Implementation ```C for(int i = 0; i < n-1; i++) { int min_index = i; for(int j = i +1; j < n; j++) { if(a[j] < a[min_index]) { min_index = j; } } swap(&a[i], &a[min_index]); </del> <ins> The following C++ program contains an iterative as well as a recursive implementation of the Selection Sort algoritm. Both implementations are invoked in the `main()` function. ```cpp #include <iostream> #include <string> using namespace std; template<typename T, size_t n> void print_array(T const(&arr)[n]) { for (size_t i = 0; i < n; i++) std::cout << arr[i] << ' '; cout << "n"; </ins> } <del> ``` #### Recursive Implementation ```C int minIndex(int a[], int i, int j) { if (i == j) return i; </del> <ins> int minIndex(int a[], int i, int j) { if (i == j) return i; </ins> int k = minIndex(a, i + 1, j); <ins> return (a[i] < a[k]) ? i : k; } </ins> <del> return (a[i] < a[k])? i : k; } </del> <ins> void recurSelectionSort(int a[], int n, int index = 0) { if (index == n) return; int k = minIndex(a, index, n - 1); if (k != index) swap(a[k], a[index]); recurSelectionSort(a, n, index + 1); } </ins> <del> void recurSelectionSort(int a[], int n, int index = 0) { if (index == n) return; </del> <ins> void iterSelectionSort(int a[], int n) { for (int i = 0; i < n; i++) { int min_index = i; int min_element = a[i]; for (int j = i + 1; j < n; j++) { if (a[j] < min_element) { min_element = a[j]; min_index = j; } } swap(a[i], a[min_index]); } } </ins> <del> int k = minIndex(a, index, n-1); </del> <ins> int main() { int recurArr[6] = { 100,35, 500, 9, 67, 20 }; int iterArr[5] = { 25, 0, 500, 56, 98 }; </ins> <del> if (k != index) swap(a[k], a[index]); </del> <ins> cout << "Recursive Selection Sort"  << "n"; print_array(recurArr); // 100 35 500 9 67 20 recurSelectionSort(recurArr, 6); print_array(recurArr); // 9 20 35 67 100 500 </ins> <del> recurSelectionSort(a, n, index + 1); </del> <ins> cout << "Iterative Selection Sort" << "n"; print_array(iterArr); // 25 0 500 56 98 iterSelectionSort(iterArr, 5); print_array(iterArr); // 0 25 56 98 500 </ins> } ```

* Time Complexity: O(n2) * Sorting in Place: Yes * Stable: No ### Visualization * [USFCA](https://www.cs.usfca.edu/~galles/visualization/ComparisonSort.html) * [HackerEarth](https://www.hackerearth.com/practice/algorithms/sorting/selection-sort/visualize/)


Question:
I think the video for this challenge should be updated. It does not show the proper nesting of both the p elements inside the main element. It also has one error as one of the p elements are not closed properly.
Any comments?
Agreed with lasjorg, In this exercise a new paragraph should be below the first, with a main tag then to wrap around both paragraphs. In the video, the main tag is around the newly second paragraph only, plus the newly paragraph has an opening p tag at the end instead of a closing p tag. For contrast, the very next video has the main and paragraph tags the way they should be. Discovered this error when my daughter ran into difficulty with this exercise, and when she watched the video became even more confused.
Any thoughts?
I will redo that video.

id: bad87fee1348bd9aecf08801 title: Introduction to HTML5 Elements challengeType: 0 <del> videoUrl: 'https://scrimba.com/p/pVMPUv/c4Ep9Am' </del> <ins> videoUrl: 'https://scrimba.com/p/pVMPUv/cBkZGpt7' </ins> --- ## Description


Question:
I'm not sure what happened to the instructions of , but there aren't any line breaks between the user stories. None of the other front end projects have this problem, but I didn't check any of the other areas. <img width="1133" alt="screen shot 2019-02-25 at 8 03 27 pm" src="https://user-"
I would like to work on this issue.
Before starting to work, let's determine what is causing it and then you can create a PR to fix it.
Sure
I figured it out. The problem is in line 17. The invalid tag (seen below) was the culprit. Just need to change it to: Now you can create a PR to fix it.
Got it... Will do
Please have a look at it now. Thanks
Let me know what you think about the PR created. I a small tweak also, which you should check locally to see what I am talking about. If you are ok with the changes, then merge it.
Please have a look at it now. Thank you.

User Story #2: Within #quote-box, I can see an element with a corresponding id="text". User Story #3: Within #quote-box, I can see an element with a corresponding id="author". User Story #4: Within #quote-box, I can see a clickable element with a corresponding id="new-quote".  User Story #5: Within #quote-box, I can see a clickable <codea element with a corresponding id="tweet-quote".   User Story #5: Within #quote-box, I can see a clickable a element with a corresponding id="tweet-quote".  User Story #6: On first load, my quote machine displays a random quote in the element with id="text". User Story #7: On first load, my quote machine displays the random quote's author in the element with id="author". User Story #8: When the #new-quote button is clicked, my quote machine should fetch a new quote and display it in the #text element. User Story #9: My quote machine should fetch the new quote's author when the #new-quote button is clicked and display it in the #author element.  User Story #10: I can tweet the current quote by clicking on the #tweet-quote a element. This a element should include the "twitter.com/intent/tweet" path in its href attribute to tweet the current quote.   User Story #10: I can tweet the current quote by clicking on the #tweet-quotea element. This a element should include the "twitter.com/intent/tweet" path in its href attribute to tweet the current quote.  User Story #11: The #quote-box wrapper element should be horizontally centered. Please run tests with browser's zoom level at 100% and page maximized. You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Once you're done, submit the URL to your working project with all its tests passing.


Question:
I have created this issue so we can come to a final conclusion about the best format of notes when they are to the or sections of a challenge file. Below are all the combinations I have seen scattered throughout the curriculum. There may be others, so please let me know and I will update the list. This only applies if there is a single note. For multiple notes (which in my opinion starts to get unnecessary), see later in this topic. Example 1: Example 2: Example 3: Example 4: Example 5: Example 6: Example 7: Regarding situations where two or more separate notes are , I have seen: Example 1: Example 2: Example 3: If everyone can cast a vote for their preference of both a single note and multiple notes, this will help us in deciding on one way and then we can update the Styling Guide for challenges in the documentation.
I will cast my vote as I prefer Example 7 for single notes, because it takes up less space and adds one additional space between the word and the content. I like Example 3 for multiple notes, because I like the to be bold.
I'll vote for number 6 for the single notes and number 3 for multiple notes. I don't really see the need for extra space between and whatever comes after it, a simple space is fine
Also to add on, perhaps we can have a background-color for all Note sections as we want users to pay attention to those sections particularly. Something like this: ! Color code used: #C9F8CF
This is the style guide contain freeCodeCamp's Brand colors: https://design-style- . We try to deviate as least as possible from this and I'm yet to see a major deviation
Also, the note is not the most important thing in the challenge. The actual instruction is. We don't want to highlight anything that is not relative to the instruction. Most of the time, these notes are FYIs.
I vote for example 6 and example 3, The says to use something in none of the examples for single notes, the output would be the same as example 2, I think - Also, the guide doesn't say anything about multi-notes
6 and 3.
I vote for example 6 in single notes and example 3 in multiple notes.
I think it is settled then. 6 and 3. What do you think?
Agreed, with you all. Thanks. Please proceed with pull requests.
I would like to work on this. Is there a way to assign my name under the assignee? I am not able to do so
Hi Go ahead with PR. We cannot assign you the issue. It's unfortunately a limitation from GitHub. Feel free to make a PR. We usually allow the first open and valid PR to go in as a fix. Thanks.
The suggestion in the PR above says to make a multi-note different from the example - so I did some testing to see the outputs and thought I should share.<brthese codes.... <img width="570" alt="screen shot 2019-03-05 at 10 26 56 am" src="https://user-"produce the following...<br<img width="415" alt="screen shot 2019-03-05 at 10 27 51 am" src="https://user-"The first two here produce the same result (same as example 3 above)... I'm not sure I like that extra space in there - I suppose it's fine, but I made a few others to see if I could make it look more like how I think it should look. So basically, I'm saying, I'm having second thoughts on how we should do the multi-notes.
I found more cases for single note. Perhaps you can update the list Case 1: Case 2: Case 3: Case 4:
Are you going ahead with a PR to put it somewhere into the docs?
Are you converting them to the suggested style And have you come across many multi-notes?
In challenges like , we have this sentence: Note that property names with spaces in them must be in quotes (single or double). So, should that sentence also be converted to: or can we ignore such cases?
yes i am following the example 6 for single note (as voted) Have not come across multiple notes yet. Will re-check.
Good points. Maybe multiple notes should just be different sentences in the same style as for a single note. Which ends up looking like: <strongNote(s):</strongFirst note goes here. Second note which is a bit longer goes here. Third note which is the longest note of all goes here.
That's a judgement call I think it could be converted. I would hold off on the mult-notes for a little bit - and if you're going to make a PR, it's probably best to try and keep it to maybe one section or so at a time, or maybe a few sections if there's only a couple files changed.
I have a doubt: in , Is the note section considered multi-note or single note? The note section has more than one sentence. Does it qualify as multi-note then?
That one looks like you could probably just put the two sentences together in a single note. Since they are so related. And we aren't sure yet what we want a multi-note to look like.
I agree if they are related a single paragraph note will be fine. However, if it gets to long it may be more difficult for the user to parse the information, and should then be broken up into individual lines. Any Notes section with more than one sentence should still be described as Notes My opinion on the multi-line notes - we should use markdown bullets. It may put a bit of space between items, but they are much simpler to manage when making changes to the markdown. They automatically insert line breaks after each item and don't require verbose HTML wrapping the text. Visually it also looks like a bulleted list. Spacing between bullets can be modified in CSS if needed. It's also easy to replace the bullet with numbers if the order of the note matters. Note vs Notes should be explicit, Note(s) is only useful if you expect someone to add a second Note and they will forget to update Note to Notes, something we should quickly catch in review with the requirement of multiple reviewers. After some conversation with I agree that it really doesn't make sense to have too many notes in a document - we should work to insert the notes into the curriculum, or provide a place for additional information that may not be directly related to the exercise but provide valuable insights/information/resources.
I believe the corresponding Guide article for the challenge is the place where extra information is supposed to go, to avoid cluttering up the challenge itself.
that may be the case but the way it's conveyed is not great IMO. The only link to the guide article is Get a Hint, something many won't click, especially if it's a fairly simple exercise. I also don't see the guide article at all when I search for the exercise title, something we should look into, unless that is by design.
I see guide links when searching for a lesson title (none of the links work right now) - perhaps you searched for a lesson where the guide article is still a stub, and they don't show up or something.
The search indexes have not been updated in over 12 months, so that could be part of this problem.
I just remember that Quincy prefers not to have links going to other places when a user is on the challenge. He believes the challenge should stand on its own or rely on previously introduced material as much as possible. We want people to stay on the challenge until they just can not, which is where the Get a Hint or Ask for Help buttons come into play.
So the single note structure was to the guide with the PR above. The multinote issue wasn't exactly concluded - do we want to continue the conversation? I'm thinking we can close this, and mods should just keep notes small when we can. And multinotes can just be combined into a single paragraph after a
I don't know how many multi-notes there actually are, but I say we just combine them like you suggest in the same paragraph. I can create a PR to reflect this. Then, as we come across the multi-notes, we can first figure out if there even needs to be a multi-note and then probably just make it a single paragraph. How does that sound?
A PR to describe this in the guide? Sure

```` - Additional information in the form of a note should be formatted `<strong>Note:</strong> Rest of note text...` <ins> - If multiple notes are needed, then list all of the notes in separate sentences using the format `<strong>Notes:</strong> First note text.  Second note text.`. </ins> - Use double quotes where applicable ## Formatting seed code


Question:
In some curriculum articles, some of the code-bits highlighted by the are enclosed by a pair of quotes which are not necessary. Since the tags already highlight code, there is no need for the quotes to be there. That is, instead of: It should be: One example can be found in PRs: [x] English [x] Chinese - No instances found [] Russian [x] Arabic [] Portuguese [x] Spanish
Do we have a list of such challenges? That would help so we know when to close this issue (i.e. all have been covered).
I do not have a list of these challenges a.t.m. In the P.R. from where this originated, has said something about there being other files where we had this, he might have a lead on it, otherwise a repo wide search for can be run
OK.
If you do a quick search of the repo to see how many files might be affected by this, then I will query the open PRs to check all existing open PRs which might have such changes.
I would like to start from . Kindly let me know May I start now to avoid file merge conflict. I checked for . There are 18 files that will be affected.
we can take care of the merge conflicts if you want to submit the PR. Make sure you're working from the latest commit of the freecodecamp master branch. Please try to limit the changes in this PR to only removing the quotes so it doesn't make conflict resolution more difficult. Thanks!
I think it's better to allow a first-time contributor to work on the issue. Please feel free to look through the other issues. There are many of them we could use your help on! In case this one is still not picked up in a few days, you can then work on this.
I was already working on this. I will look for issues also from now onwards.
Is this issue still on? If yes, can I help you?
This one already has an open PR (see above ).
Okay No problem!!
Is this issue closed ? I am a first time contributor and would like to work on it.
Not yet, only the PR for English language has been merged. Check with for what languages he is making a PR for
You can start with any of the language except English language. I am not working as of now for any other language. It would be great if we allow first timer to work on this.
hello, I would like to do this as a first timer. Where should I start?
check with for what languages they are working on, you can pick up the other languages and use the search and replace functionality of your code editor to make changes as discussed above
Hi, I'm new to freecodecamp but I'm wondering if you guys still need help on this? If so, what languages should I work on? Thanks!
Hello, I'd like to help with this issue as well. Which language folders are available? Thanks!
Thanks for helping out with this! AFAIK, so far only . Since we haven't heard from and yet, you both are welcome to pick one language each from the available four (Arabic, Chinese, Portuguese and Spanish), and start working on the corresponding files. Considering that and asked first, we'll wait for them to claim the other two language versions if they're still interested. In case they (or aren't, you can then continue with these remaining versions too (if you prefer).
Thanks I'll volunteer to do the Spanish folder.
Thanks I'll take the Portuguese folder!
Hi, after taking a cursory look in /curriculum/challenges/portuguese, and searching for <code"<codestuff </code"</code", and &quot, I haven't found any examples of <code"<codestuff </code"</code", and the only places where <code"<codeor </code" </codepop up are in Tests, and in assert fields, where it's unrelated I think. Am I missing something? Sorry for the bother!
Hi Try searching making sure there is a space in between. I noticed there were a lot of false positives when I did my search. When I searched, I was able to find in the Portuguese folder at declare-the-doctype-of-an-html-
Thank you! I removed all the instances of , and I think that that may be all of the instances in the Portuguese files. Would it be possible for me to work on the other untaken languages as well, or should I wait on and to see if they are picking up Arabic/Chinese?
Guys, try searching for and separately
I made sure to search , , , , , , , and , all separately.
Do we still need help for Arabic/Chinese? I wouldn't mind picking up those as well!
Sure! Go ahead!
Hi are you doing both Arabic/Chinese? Do you mind if I do one of the folders?
Go for it! I'll take Chinese and you can have Arabic?
Thanks I'll move forward with the Arabic folder.
Hey, Would like to give a hand as its my first contribution. Where should i start? is the quote issue resolved or are there more languages where help is needed? Thanks in advance
- It appears you can choose between Spanish and Portuguese. If you have not contributed before, I suggest starting with and . If you have any questions, then ask in our .
Actually I think that all files currently are accounted for. Me and have created PR's for Portuguese/Spanish, and now we're working on Chinese/Arabic. I think Russian and English were already taken before us.
After looking for , , , , , , , and , I couldn't find any instances of any of these in the Chinese folder. Somebody else can verify if they wish, but as far as I've searched, I can't find anything in the Chinese folder specifically, even though they exist in my local (non-fixed) Arabic, Portuguese, Spanish, etc. folders, so I don't think a PR needs to be made for the Chinese folder specifically.
Hi, this will be my first contribution. I'm wondering if Chinese is still up for grab. If not, which one can I choose? Thanks.
It appears is already working on the Chinese version.
Alright, it seems like every one of them is taken. Let me know if any one of them needs help in the future. Thanks.
I've taken a look at the Chinese version, and it seems like the quotes are already removed. I won't be submitting a PR for it, so if you want to take a look and find something that I missed then feel free to make the PR yourself!
Had this been fixed in the Portuguese and Russian folders? Someone needs to have a look
Even if those languages were not translated, it is fine. We are no longer accepting translations for the current curriculum. We do not need any further PRs for the the non-English curriculum files.
I see. Alright

--- ## Description
 Los desafíos hasta ahora han cubierto elementos HTML específicos y sus usos. Sin embargo, hay algunos elementos que le dan estructura general a su página y deben incluirse en cada documento HTML. En la parte superior de su documento, debe indicar al navegador qué versión de HTML está usando su página. HTML es un lenguaje en evolución, y se actualiza regularmente. La mayoría de los principales navegadores son compatibles con la última especificación, que es HTML5. Sin embargo, las páginas web más antiguas pueden usar versiones anteriores del idioma. Usted le dice al navegador esta información agregando la etiqueta <!DOCTYPE ...> en la primera línea, donde la parte " ... " es la versión de HTML. Para HTML5, utiliza <!DOCTYPE html> . El ! y el DOCTYPE mayúsculas es importante, especialmente para los navegadores más antiguos. El html no distingue entre mayúsculas y minúsculas. A continuación, el resto de su código HTML debe estar envuelto en etiquetas html . La apertura <html> va directamente debajo de la línea <!DOCTYPE html> , y el cierre </html> va al final de la página. Aquí hay un ejemplo de la estructura de la página:
 <! DOCTYPE html>
 <html>
 <! - Su código HTML va aquí ->
 </html>

 Los desafíos hasta ahora han cubierto elementos HTML específicos y sus usos. Sin embargo, hay algunos elementos que le dan estructura general a su página y deben incluirse en cada documento HTML. En la parte superior de su documento, debe indicar al navegador qué versión de HTML está usando su página. HTML es un lenguaje en evolución, y se actualiza regularmente. La mayoría de los principales navegadores son compatibles con la última especificación, que es HTML5. Sin embargo, las páginas web más antiguas pueden usar versiones anteriores del idioma. Usted le dice al navegador esta información agregando la etiqueta <!DOCTYPE ...> en la primera línea, donde la parte  ... es la versión de HTML. Para HTML5, utiliza <!DOCTYPE html> . El ! y el DOCTYPE mayúsculas es importante, especialmente para los navegadores más antiguos. El html no distingue entre mayúsculas y minúsculas. A continuación, el resto de su código HTML debe estar envuelto en etiquetas html . La apertura <html> va directamente debajo de la línea <!DOCTYPE html> , y el cierre </html> va al final de la página. Aquí hay un ejemplo de la estructura de la página:
 <! DOCTYPE html>
 <html>
 <! - Su código HTML va aquí ->
 </html>

  ## Instructions
 Agregue una etiqueta DOCTYPE para HTML5 en la parte superior del documento HTML en blanco en el editor de código. Debajo de él, agregue etiquetas html apertura y cierre, que envuelven un elemento h1 . El encabezado puede incluir cualquier texto.

--- ## Description
 Puede ejecutar el mismo código varias veces utilizando un bucle. El siguiente tipo de bucle que aprenderá se denomina bucle " do...while " porque primero " do " una pasada del código dentro del bucle sin importar qué, y luego se ejecuta " while " se cumple una condición específica y se detiene una vez que esa condición ya no es verdadera. Veamos un ejemplo.
 var ourArray = [];
 var i = 0;
 hacer {
 nuestroArray.push (i);
 i ++;
 } while (i <5);
 Esto se comporta como se esperaría con cualquier otro tipo de bucle, y la matriz resultante se verá como [0, 1, 2, 3, 4] . Sin embargo, lo que hace do...while diferente de otros bucles es cómo se comporta cuando la condición falla en la primera comprobación. Veamos esto en acción. Aquí hay un bucle while común que ejecutará el código en el bucle siempre y cuando i < 5 .
 var ourArray = [];
 var i = 5;
 mientras (i <5) {
 nuestroArray.push (i);
 i ++;
 }
 Observe que inicializamos el valor de i en 5. Cuando ejecutamos la siguiente línea, notamos que i no es menor que 5. Por lo tanto, no ejecutamos el código dentro del bucle. El resultado es que ourArray no agregará nada, por lo que aún se verá así [] cuando todo el código del ejemplo anterior termine de ejecutarse. Ahora, eche un vistazo a un do...while loop.
 var ourArray = [];
 var i = 5;
 hacer {
 nuestroArray.push (i);
 i ++;
 } while (i <5);
 En este caso, inicializamos el valor de i como 5, tal como hicimos con el bucle while. Cuando llegamos a la siguiente línea, no hay comprobación del valor de i , por lo que vamos al código dentro de las llaves y lo ejecutamos. Agregaremos un elemento a la matriz e incrementaremos i antes de llegar a la verificación de condición. Entonces, cuando se llega a comprobar si i < 5 ver que i es ahora de 6 años, que no pasa la comprobación condicional. Así que salimos del bucle y estamos listos. Al final del ejemplo anterior, el valor de ourArray es [5] . Esencialmente, un bucle do...while while garantiza que el código dentro del bucle se ejecute al menos una vez. Intentemos obtener un bucle do...while while para que funcione presionando valores en una matriz.

 Puede ejecutar el mismo código varias veces utilizando un bucle. El siguiente tipo de bucle que aprenderá se denomina bucle do...while porque primero do una pasada del código dentro del bucle sin importar qué, y luego se ejecuta while se cumple una condición específica y se detiene una vez que esa condición ya no es verdadera. Veamos un ejemplo.
 var ourArray = [];
 var i = 0;
 hacer {
 nuestroArray.push (i);
 i ++;
 } while (i <5);
 Esto se comporta como se esperaría con cualquier otro tipo de bucle, y la matriz resultante se verá como [0, 1, 2, 3, 4] . Sin embargo, lo que hace do...while diferente de otros bucles es cómo se comporta cuando la condición falla en la primera comprobación. Veamos esto en acción. Aquí hay un bucle while común que ejecutará el código en el bucle siempre y cuando i < 5 .
 var ourArray = [];
 var i = 5;
 mientras (i <5) {
 nuestroArray.push (i);
 i ++;
 }
 Observe que inicializamos el valor de i en 5. Cuando ejecutamos la siguiente línea, notamos que i no es menor que 5. Por lo tanto, no ejecutamos el código dentro del bucle. El resultado es que ourArray no agregará nada, por lo que aún se verá así [] cuando todo el código del ejemplo anterior termine de ejecutarse. Ahora, eche un vistazo a un do...while loop.
 var ourArray = [];
 var i = 5;
 hacer {
 nuestroArray.push (i);
 i ++;
 } while (i <5);
 En este caso, inicializamos el valor de i como 5, tal como hicimos con el bucle while. Cuando llegamos a la siguiente línea, no hay comprobación del valor de i , por lo que vamos al código dentro de las llaves y lo ejecutamos. Agregaremos un elemento a la matriz e incrementaremos i antes de llegar a la verificación de condición. Entonces, cuando se llega a comprobar si i < 5 ver que i es ahora de 6 años, que no pasa la comprobación condicional. Así que salimos del bucle y estamos listos. Al final del ejemplo anterior, el valor de ourArray es [5] . Esencialmente, un bucle do...while while garantiza que el código dentro del bucle se ejecute al menos una vez. Intentemos obtener un bucle do...while while para que funcione presionando valores en una matriz.
  ## Instructions
 Cambiar el while de bucle en el código a un do...while bucle de modo que el bucle empujará el número 10 a myArray , y i será igual a 11 cuando el código termina de ejecutarse.

--- ## Description
 Puede ejecutar el mismo código varias veces utilizando un bucle. El tipo más común de bucle de JavaScript se llama " for loop " porque se ejecuta "por" un número específico de veces. Para los bucles se declaran con tres expresiones opcionales separadas por punto y coma: for ([initialization]; [condition]; [final-expression]) La instrucción de initialization se ejecuta una sola vez antes de que comience el bucle. Normalmente se utiliza para definir y configurar su variable de bucle. La declaración de condition se evalúa al comienzo de cada iteración de bucle y continuará mientras se evalúe como true . Cuando la condition es false al inicio de la iteración, el bucle dejará de ejecutarse. Esto significa que si la condition comienza como false , su bucle nunca se ejecutará. La final-expression se ejecuta al final de cada iteración de bucle, antes de la siguiente verificación de condition y generalmente se usa para incrementar o disminuir su contador de bucle. En el siguiente ejemplo, iniciamos con i = 0 e iteramos mientras nuestra condición i < 5 es verdadera. Incrementaremos i en 1 en cada iteración de bucle con i++ como nuestra final-expression .
 var ourArray = [];
 para (var i = 0; i <5; i ++) {
 nuestroArray.push (i);
 }
 ourArray ahora contendrá [0,1,2,3,4] .

 Puede ejecutar el mismo código varias veces utilizando un bucle. El tipo más común de bucle de JavaScript se llama for loop  porque se ejecuta "por" un número específico de veces. Para los bucles se declaran con tres expresiones opcionales separadas por punto y coma: for ([initialization]; [condition]; [final-expression]) La instrucción de initialization se ejecuta una sola vez antes de que comience el bucle. Normalmente se utiliza para definir y configurar su variable de bucle. La declaración de condition se evalúa al comienzo de cada iteración de bucle y continuará mientras se evalúe como true . Cuando la condition es false al inicio de la iteración, el bucle dejará de ejecutarse. Esto significa que si la condition comienza como false , su bucle nunca se ejecutará. La final-expression se ejecuta al final de cada iteración de bucle, antes de la siguiente verificación de condition y generalmente se usa para incrementar o disminuir su contador de bucle. En el siguiente ejemplo, iniciamos con i = 0 e iteramos mientras nuestra condición i < 5 es verdadera. Incrementaremos i en 1 en cada iteración de bucle con i++ como nuestra final-expression .
 var ourArray = [];
 para (var i = 0; i <5; i ++) {
 nuestroArray.push (i);
 }
 ourArray ahora contendrá [0,1,2,3,4] .
  ## Instructions
 Use un bucle for para trabajar y empujar los valores del 1 al 5 en myArray .

--- ## Description
 Puede ejecutar el mismo código varias veces utilizando un bucle. El primer tipo de bucle vamos a aprender se llama un " while " bucle porque funciona "mientras que" una condición especificada es verdadera y se detiene una vez que la condición ya no es cierto.
 var ourArray = [];
 var i = 0;
 mientras (i <5) {
 nuestroArray.push (i);
 i ++;
 }
 Intentemos que funcione un bucle while empujando los valores a una matriz.

 Puede ejecutar el mismo código varias veces utilizando un bucle. El primer tipo de bucle vamos a aprender se llama un while bucle porque funciona "mientras que" una condición especificada es verdadera y se detiene una vez que la condición ya no es cierto.
 var ourArray = [];
 var i = 0;
 mientras (i <5) {
 nuestroArray.push (i);
 i ++;
 }
 Intentemos que funcione un bucle while empujando los valores a una matriz.
  ## Instructions
 Empuje los números de 0 a 4 para myArray usando un while de bucle.

--- ## Description
 Otra forma de cambiar los datos en una matriz es con la función .pop() . .pop() se utiliza para " .pop() " un valor del final de una matriz. Podemos almacenar este valor "extraído" asignándolo a una variable. En otras palabras, .pop() elimina el último elemento de una matriz y devuelve ese elemento. Cualquier tipo de entrada se puede "extraer" de una matriz: números, cadenas, incluso matrices anidadas.
 var threeArr = [1, 4, 6];
 var oneDown = threeArr.pop();
 console.log(oneDown); // Returns 6
 console.log(threeArr); // Returns [1, 4]

 Otra forma de cambiar los datos en una matriz es con la función .pop() . .pop() se utiliza para  .pop()  un valor del final de una matriz. Podemos almacenar este valor "extraído" asignándolo a una variable. En otras palabras, .pop() elimina el último elemento de una matriz y devuelve ese elemento. Cualquier tipo de entrada se puede "extraer" de una matriz: números, cadenas, incluso matrices anidadas.
 var threeArr = [1, 4, 6];
 var oneDown = threeArr.pop();
 console.log(oneDown); // Returns 6
 console.log(threeArr); // Returns [1, 4]

  ## Instructions
 Use la función .pop() para eliminar el último elemento de myArray , asignando el valor " removedFromMyArray " a removedFromMyArray .

 Use la función .pop() para eliminar el último elemento de myArray , asignando el valor  removedFromMyArray a removedFromMyArray .
  ## Tests

```yml tests: <del> - text: Su expresión regular debe coincidir con <code>one</code> criminal (" <code>C</code> ") en <code>"C"</code> testString: 'assert("C".match(reCriminals) && "C".match(reCriminals)[0] == "C", "Your regex should match <code>one</code> criminal ("<code>C</code>") in <code>"C"</code>");' - text: Su expresión regular debe coincidir con <code>two</code> delincuentes (" <code>CC</code> ") en <code>"CC"</code> testString: 'assert("CC".match(reCriminals) && "CC".match(reCriminals)[0] == "CC", "Your regex should match <code>two</code> criminals ("<code>CC</code>") in <code>"CC"</code>");' - text: Su expresión regular debe coincidir con <code>three</code> delincuentes (" <code>CCC</code> ") en <code>"P1P5P4CCCP2P6P3"</code> testString: 'assert("P1P5P4CCCP2P6P3".match(reCriminals) && "P1P5P4CCCP2P6P3".match(reCriminals)[0] == "CCC", "Your regex should match <code>three</code> criminals ("<code>CCC</code>") in <code>"P1P5P4CCCP2P6P3"</code>");' - text: Su expresión regular debe coincidir con <code>five</code> delincuentes (" <code>CCCCC</code> ") en <code>"P6P2P7P4P5CCCCCP3P1"</code> testString: 'assert("P6P2P7P4P5CCCCCP3P1".match(reCriminals) && "P6P2P7P4P5CCCCCP3P1".match(reCriminals)[0] == "CCCCC", "Your regex should match <code>five</code> criminals ("<code>CCCCC</code>") in <code>"P6P2P7P4P5CCCCCP3P1"</code>");' </del> <ins> - text: Su expresión regular debe coincidir con <code>one</code> criminal (<code>C</code> ) en <code>"C"</code> testString: 'assert("C".match(reCriminals) && "C".match(reCriminals)[0] == "C", "Your regex should match <code>one</code> criminal (<code>C</code>) in <code>"C"</code>");' - text: Su expresión regular debe coincidir con <code>two</code> delincuentes (<code>CC</code>) en <code>"CC"</code> testString: 'assert("CC".match(reCriminals) && "CC".match(reCriminals)[0] == "CC", "Your regex should match <code>two</code> criminals (<code>CC</code>) in <code>"CC"</code>");' - text: Su expresión regular debe coincidir con <code>three</code> delincuentes (<code>CCC</code>) en <code>"P1P5P4CCCP2P6P3"</code> testString: 'assert("P1P5P4CCCP2P6P3".match(reCriminals) && "P1P5P4CCCP2P6P3".match(reCriminals)[0] == "CCC", "Your regex should match <code>three</code> criminals (<code>CCC</code>) in <code>"P1P5P4CCCP2P6P3"</code>");' - text: Su expresión regular debe coincidir con <code>five</code> delincuentes (<code>CCCCC</code>) en <code>"P6P2P7P4P5CCCCCP3P1"</code> testString: 'assert("P6P2P7P4P5CCCCCP3P1".match(reCriminals) && "P6P2P7P4P5CCCCCP3P1".match(reCriminals)[0] == "CCCCC", "Your regex should match <code>five</code> criminals (<code>CCCCC</code>) in <code>"P6P2P7P4P5CCCCCP3P1"</code>");' </ins> - text: Tu expresión regular no debe coincidir con ningún criminal en <code>""</code> testString: 'assert(!reCriminals.test(""), "Your regex should not match any criminals in <code>""</code>");' - text: Su expresión regular no debe coincidir con ningún criminal en <code>"P1P2P3"</code> testString: 'assert(!reCriminals.test("P1P2P3"), "Your regex should not match any criminals in <code>"P1P2P3"</code>");' <del> - text: Su expresión regular debe coincidir con <code>fifty</code> delincuentes (" <code>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</code> ") en <code>"P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3"</code> . testString: 'assert("P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3".match(reCriminals) && "P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3".match(reCriminals)[0] == "CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC", "Your regex should match <code>fifty</code> criminals ("<code>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</code>") in <code>"P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3"</code>.");' </del> <ins> - text: Su expresión regular debe coincidir con <code>fifty</code> delincuentes (<code>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</code>) en <code>"P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3"</code> . testString: 'assert("P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3".match(reCriminals) && "P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3".match(reCriminals)[0] == "CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC", "Your regex should match <code>fifty</code> criminals (<code>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</code>) in <code>"P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3"</code>.");' </ins> ```

--- ## Description
 Tarea:
 Implementar una función que:
 toma un número entero positivo que representa una duración en segundos como entrada (por ejemplo, 100 ), y devuelve una cadena que muestra la misma duración descompuesta en semanas, días, horas, minutos y segundos como se detalla a continuación (por ejemplo, " 1 min, 40 sec ").
 Demostrar que pasa los siguientes tres casos de prueba:

 Casos de prueba

 número de entrada 	 número de salida

 7259 	 2 hr, 59 sec

 86400 	 1 d

 6000000 	 9 wk, 6 d, 10 hr, 40 min

 Detalles
 Se deben usar las siguientes cinco unidades:

 unidad 	 sufijo utilizado en la salida 	 conversión

 semana 	 wk 	  1 semana = 7 días

 día 	 d 	  1 día = 24 horas

 hora 	 hr 	  1 hora = 60 minutos

 minuto 	 min 	  1 minuto = 60 segundos

 segundo 	 sec

 Sin embargo, solo incluya cantidades con valores distintos de cero en la salida (p. Ej., Devuelva " 1 d " y no " 0 wk, 1 d, 0 hr, 0 min, 0 sec "). Dé prioridad a las unidades más grandes sobre las más pequeñas como sea posible (p. ej., devolver 2 min, 10 sec y no 1 min, 70 sec o 130 sec ) Imitar el formato que se muestra en los casos de prueba (cantidades ordenadas de unidad mayor a menor y separadas por comas + espacio; valor y unidad de cada cantidad separada por espacio).

 Tarea:
 Implementar una función que:
 toma un número entero positivo que representa una duración en segundos como entrada (por ejemplo, 100 ), y devuelve una cadena que muestra la misma duración descompuesta en semanas, días, horas, minutos y segundos como se detalla a continuación (por ejemplo, 1 min, 40 sec).
 Demostrar que pasa los siguientes tres casos de prueba:

 Casos de prueba

 número de entrada 	 número de salida

 7259 	 2 hr, 59 sec

 86400 	 1 d

 6000000 	 9 wk, 6 d, 10 hr, 40 min

 Detalles
 Se deben usar las siguientes cinco unidades:

 unidad 	 sufijo utilizado en la salida 	 conversión

 semana 	 wk 	  1 semana = 7 días

 día 	 d 	  1 día = 24 horas

 hora 	 hr 	  1 hora = 60 minutos

 minuto 	 min 	  1 minuto = 60 segundos

 segundo 	 sec

 Sin embargo, solo incluya cantidades con valores distintos de cero en la salida (p. Ej., Devuelva 1 d y no &0 wk, 1 d, 0 hr, 0 min, 0 sec). Dé prioridad a las unidades más grandes sobre las más pequeñas como sea posible (p. ej., devolver 2 min, 10 sec y no 1 min, 70 sec o 130 sec ) Imitar el formato que se muestra en los casos de prueba (cantidades ordenadas de unidad mayor a menor y separadas por comas + espacio; valor y unidad de cada cantidad separada por espacio).

  ## Instructions


Question:
<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --Describe your problem and how to reproduce it: in challenge i found an error. single qoute symbol is wrong in guide section. symbol of single qoute should be this (') but it is showing this ("). Add a Link to the page with the problem: Tell us about your browser and operating system: Browser Name: chrome Browser Version: 71.0.3578.98 (Official Build) (64-bit) Operating System: ubuntu 18.04 If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box): !
Good catch! I recommend changing the current line 9 in to the following: which will then display as the following: JavaScript allows the use of both single (<code'</code) and double (<code"</code) quotes to declare a string. Deciding which one to use generally comes down to personal preference, with some exceptions.

## Description
  JavaScript allows the use of both single ('') and double ("") quotes to declare a string. Deciding which one to use generally comes down to personal preference, with some exceptions.   JavaScript allows the use of both single (') and double (") quotes to declare a string. Deciding which one to use generally comes down to personal preference, with some exceptions.  Having two choices is great when a string has contractions or another piece of text that's in quotes. Just be careful that you don't close the string too early, which causes a syntax error. Here are some examples of mixing quotes:
// These are correct:
const grouchoContraction = "I've had a perfectly wonderful evening, but this wasn't it.";
const quoteInString = "Groucho Marx once said 'Quote me as saying I was mis-quoted.'";
// This is incorrect:
const uhOhGroucho = 'I've had a perfectly wonderful evening, but this wasn't it.';


Question:
Please consider adding the to It's a useful, open-sourced Angular CRUD application starter with NgRx state management and Firebase backend.
- please feel free to submit a Pull Request with the content you would like to have . If you have questions or concerns regarding a Pull Request, please feel free to drop by the I have the help wanted label as well in case anyone else is interested.
Adding the label. This looks like a good first PR for a new contributor.
Hi. I am new to this. Can I take this on?
Thanks, ;) of course, you can take this on
I stil do not see it here:
We still haven’t deployed the current master to production. It will be done shortly

*   Angular - The Angular Homepage *   Angular Style Guide - Detailed best practices for Angular Development *   Angular Material - Excellent UI Framework that was built for Angular  * Angular Bootstrap Boilerplate - Free, responsive CRUD application starter with NgRx state management, Firebase backend and material design  ### Specific-topic Pages


Question:
Describe the bug TL;DR – first signed up with GitHub (which has email # 1 set as primary). Lately changed the email on FCC to email # 2 and since then unable to log in using any of the available methods. I have two emails: .domain On GitHub, I have the first one as a primary email and the second one as a secondary. IIRC, I first signed up to FCC with GitHub, so the letters were going to my first email. Then I set my email at FCC to the second one and this is where the fun begins. What happens when I try to log in using different methods: As you can see, no method allows me to log into my original account. Email bindings shown in each of the accounts: My session cookie is still present in one of the browsers and when I try to change the email back to # 1, it says that it is already bound to another account, which is fair enough.
Does something need to be clarified? It's not a "Help" issue, it's a bug report.
What if you try to change your email to some other email - then go to the browser that's still logged in with the original account, and change the email back to - or if you're still logged in on a browser with your original account, maybe change the email to a new email and see if that will allow you on to your original account. It doesn't get to the root of the problem, but it may get you back on to your original account.
Hi Thanks for your report. Can you send me an email with details of your emails. I'll fix up your account, and investigate the root cause and possible fix there on.
I no longer have this session. I've sent an email, the subject is as the name of the issue.
I can see that we indeed have two accounts for each of your emails listed in the email. For all intents and purposes, we only use email as the primary identifier of your account. So, it literally depends on what a provider returns us as an email address to lookup and sign you into the account. For example: First email: Changed email: Scenario 1: When you sign-in through email, you must use your changed email "", using the old email will indeed create a new account for "". We do not track old emails per account as a measure of privacy. Scenario 2: When you sign-in through social providers like GitHub, they should be returning us the changed email, or indeed it will simply create a new account for the email they returned to us. We do not bind email to social provider again for privacy reasons. Essentially by design, we will create or return an account as per the authentication method used.
Well, the thing is – there are now three accounts. The original one is .
Okay, I found the issue. Thanks for the additional information. This indeed is a validation bug, when someone changes email. So, when you entered your email on the update form in settings: You entered something like: , this was stored on our DB as is without sanitising it to lowercase. And the providers will always return lowercase emails. We unfortunately treated this incorrectly. If you are okay, I am going to delete your 'new accounts' and restore the email that you intended as per the change lower-cased, which should give you access back to your original account. As for the fix, I'll audit the code and get back to you.
I don't use them, so yeah.
thanks for confirming, I have updated the email to be lowercased on your original account and removed the new accounts. Can you test this and let me know, if it's all fixed.
Yep, it's working.
The fix for this is dependent on

: ''; if (!isEmail('' + email)) { throw wrapHandledError( <del> new Error('invalid or empty email recieved from auth0'), </del> <ins> new Error('invalid or empty email received from auth0'), </ins> { message: dedent` ${provider} did not return a valid email address.

} if (provider === 'email') { <del> return User.findOne$({ where: { email } }) </del> <ins> return User.findOne$({ where: { email: new RegExp(email.replace('.', '.'), 'i') } }) </ins> .flatMap(user => { return user ? Observable.of(user)

return Observable.fromNodeCallback(Model.destroyAll, Model)({ userId: id }); } <ins> function ensureLowerCaseString(maybeString) { return (maybeString && maybeString.toLowerCase()) || ''; } </ins> function buildCompletedChallengesUpdate(completedChallenges, project) { const key = Object.keys(project)[0]; const solutions = project[key];

User.prototype.requestAuthEmail = requestAuthEmail; <del> User.prototype.requestUpdateEmail = function requestUpdateEmail(newEmail) { const currentEmail = this.email; </del> <ins> function requestUpdateEmail(requestedEmail) { const newEmail = ensureLowerCaseString(requestedEmail); const currentEmail = ensureLowerCaseString(this.email); </ins> const isOwnEmail = isTheSame(newEmail, currentEmail); <del> const isResendUpdateToSameEmail = isTheSame(newEmail, this.newEmail); </del> <ins> const isResendUpdateToSameEmail = isTheSame( newEmail, ensureLowerCaseString(this.newEmail) ); </ins> const isLinkSentWithinLimit = getWaitMessage(this.emailVerifyTTL); const isVerifiedEmail = this.emailVerified;

} else { return 'Something unexpected happened while updating your email.'; } <del> }; </del> <ins> } User.prototype.requestUpdateEmail = requestUpdateEmail; </ins> User.prototype.requestUpdateFlags = async function requestUpdateFlags( values


Question:
Feature Request: Add as valid method to clone/copy array and as an alternative to Link to challenge: I often use () to return an array copy, as this is what MDN recommends. When I was working on this challenge I could not get it to pass, even though my solution was returning the correct answer. The challenge ONLY accepts answers that use the format [].concat(arr). The wording in the challenge is clear, but experience from earlier challenges hava been lenient as long as you provide a valid solution. Other reasons: When googling for array copying the top result from MDN recommends slice.()MDN's Array page recommends using () for array copying opinion, is more readable than
You have to also view the test text as part of the instructions for the challenges. In this case, one of the the challenge test expects you to use the method. It even mentions the method in the Description section of the challenge. Always read the test text to make sure you understand what is being asked of you.
If anyone working on this issue? I would like to take care of this. In my opinion, has a point in that the test should allow .slice() if the effect is the same - we know that many times people can solve a problem in multiple ways, and that should be ok. Please let me know. I can either clarify the text so that the user knows to use concat, or I can modify both the description and the test so that .slice(0) is accepted ( I am inclining more towards the second option though).
I bring it up since alternative solutions has been accepted previously in the corriculum. As long as the final solution is correct. It was frustrating to have the tests fail even though the output was correct.
I normally would agree, but the description mentioned and the test case specifically tells you to use
Does it have to be specifically .concat() though? The test seems to be about learning mutation and which functions have side effects and how to work around that. We learn about both concat and slice earlier on, and it seems arbitrary to only accept concat. If the point of the challenge is to learn about concat that's fair. I'd recommend mentioning that .slice() is also an option, but ask to use .concat() still. If the point is avoiding mutation and being aware that certain methods like .sort() will have side effects on the original array. Then I don't understand why it's so strict.
and After thinking a bit more about your points, I agree this challenge could be updated to allow any valid method for copying the array (, , , ) and other possible ways not mentioned. While looking at the challenge tests, I also realized someone could still technically hard-code the final return value, so I created a PR to address your concerns and attempt to not allow hard coding of the final array returned.

## Description
  A side effect of the sort method is that it changes the order of the elements in the original array. In other words, it mutates the array in place. One way to avoid this is to first concatenate an empty array to the one being sorted (remember that concat returns a new array), then run the sort method.   A side effect of the sort method is that it changes the order of the elements in the original array. In other words, it mutates the array in place. One way to avoid this is to first concatenate an empty array to the one being sorted (remember that slice and concat return a new array), then run the sort method.
 ## Instructions

```yml tests: - text: Your code should use the <code>sort</code> method. <del> testString: assert(code.match(/.sort/g), 'Your code should use the <code>sort</code> method.'); - text: Your code should use the <code>concat</code> method. testString: assert(code.match(/.concat/g), 'Your code should use the <code>concat</code> method.'); </del> <ins> testString: assert(nonMutatingSort.toString().match(/.sort/g)); </ins> - text: The <code>globalArray</code> variable should not change. <del> testString: assert(JSON.stringify(globalArray) === JSON.stringify([5, 6, 3, 2, 9]), 'The <code>globalArray</code> variable should not change.'); </del> <ins> testString: assert(JSON.stringify(globalArray) === JSON.stringify([5, 6, 3, 2, 9])); </ins> - text: <code>nonMutatingSort(globalArray)</code> should return <code>[2, 3, 5, 6, 9]</code>. <del> testString: assert(JSON.stringify(nonMutatingSort(globalArray)) === JSON.stringify([2, 3, 5, 6, 9]), '<code>nonMutatingSort(globalArray)</code> should return <code>[2, 3, 5, 6, 9]</code>.'); </del> <ins> testString: assert(JSON.stringify(nonMutatingSort(globalArray)) === JSON.stringify([2, 3, 5, 6, 9])); - text: <code>nonMutatingSort(globalArray)</code> should not be hard coded. testString: assert(!nonMutatingSort.toString().match(/[23569]/g)); </ins> ```


Question:
<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --Describe your problem and how to reproduce it: I have gone through the Guides of freeCodeCamp and I think there should be Guides on Some Static Site Generator like Hugo, Jekyll, Next, Hexo etc The guides have already which is also used to generate the static site
Hi I think it is fine to do that. If you really want to do it write, I would suggest first creating a new article on Static Site Generators that would be located at . Then, in the same PR, I would suggest moving the existing to be a sub folder of the folder you create like . Then, you contributors can create other folders/files like: However, please do a quick search of the repo to see if you can find existing articles which may already cover these. I believe I have seen some of these mentioned in detail in some existing Guide articles, so we don't want to be duplicating content if we can keep from it. In fact, before creating a PR, I suggest you document here where you find any of these and we will figure out the best strategy of how to organize everything.
Any progress on this
yeah I have gone through the guides I think the only static site generator based file in freeCodeCamp is I am working on to add more guides on static site generator like and
Take the time you need. It was just a while since any activity here so I thought I would check in.

<del> --- title: Gatsby.js --- ## Gatsby.js [Gatsby](https://www.gatsbyjs.org) is a static site generator for [React](https://guide.freecodecamp.org/react), powered by [GraphQL](https://graphql.org/). Gatsby loads only the critical HTML, CSS, data, and JavaScript so your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so clicking around the site feels incredibly fast. The Gatsby environment provides several "starters" to help configure static sites quickly. Starters can be found here: [Starter Library](https://www.gatsbyjs.org/starters/). ### How Gatsby works Gatsby builds sites with the data provided by developer, regardless of the source. #### Data sources Gatsby accepts the data behind the site in various formats, such as: 1. CMSs: Wordpress, Contenful, Drupal, etc. 2. Markdown: Documentation, posts, etc. 3. Data: APIs, Databasses, JSON, CSV, etc. #### Build Gatsby's build is powered by GraphQL and rendered through HTML, CSS, and React. Since Gatsby is built on React you straight away get all the things we love about React, like composability, one-way binding, resuability, great environment and allows you to query your data however you want! #### Deploy Gatsby deploys the site on a static web host such as Amazon S3, Netlify, GitHub Pages, Surge.sh and many more. ### Installation and using the Gatsby CLI * Node: `npm install --global gatsby-cli` * Get started with the official Gatsby starter: `gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-default` * After that change to the newly created directory `cd gatsby-site` * `gatsby develop` starts a hot-reloading development server at `localhost:8000`. The site will reload when changes in `src/pages` will be saved. * To generate the static HTML pages use `gatsby build` * `gatsby serve` will start a local server that will present your built site. ### Querying data You are accessing all data by writing GraphQL queries. GraphQL allows you to pull only the data you need into your components, unlike when fetching data from REST API. A detailed walktrough is available at https://www.gatsbyjs.org/tutorial/part-four/?no-cache=1#how-gatsbys-data-layer-uses-graphql-to-pull-data-into-components. #### More Information: For tutorials and more information check out the Gatsby.js official site: [Gatsby.js official site](https://www.gatsbyjs.org/tutorial/) </del>

<ins> --- title: Gatsby.js --- ## Gatsby.js [Gatsby](https://www.gatsbyjs.org) is a static site generator for [React](https://guide.freecodecamp.org/react), powered by [GraphQL](https://graphql.org/). Gatsby loads only the critical HTML, CSS, data, and JavaScript so your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so clicking around the site feels incredibly fast. The Gatsby environment provides several "starters" to help configure static sites quickly. Starters can be found here: [Starter Library](https://www.gatsbyjs.org/starters/). ### How Gatsby works Gatsby builds sites with the data provided by the developer, regardless of the source. #### Data sources Gatsby accepts the data behind the site in various formats, such as: 1. CMSs: Wordpress, Contentful, Drupal, etc. 2. Markdown: Documentation, posts, etc. 3. Data: APIs, Databases, JSON, CSV, etc. #### Build Gatsby's build is powered by GraphQL and rendered through HTML, CSS, and React. Since Gatsby is built on React you straight away get all the things we love about React, like composability, one-way binding, reusability, great environment and allows you to query your data however you want! #### Deploy Gatsby deploys the site on a static web host such as Amazon S3, Netlify, GitHub Pages, Surge.sh and many more. ### Installation and using the Gatsby CLI * Node: `npm install --global gatsby-cli` * Get started with the official Gatsby starter: `gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-default` * After that change to the newly created directory `cd gatsby-site` * `gatsby develop` starts a hot-reloading development server at `localhost:8000`. The site will reload when changes in `src/pages` will be saved. * To generate the static HTML pages use `gatsby build` * `gatsby serve` will start a local server that will present your built site. ### Querying data You are accessing all data by writing GraphQL queries. GraphQL allows you to pull only the data you need into your components, unlike when fetching data from REST API. A detailed walkthrough is available at https://www.gatsbyjs.org/tutorial/part-four/?no-cache=1#how-gatsbys-data-layer-uses-graphql-to-pull-data-into-components. #### More Information: For tutorials and more information check out the Gatsby.js official site: [Gatsby.js official site](https://www.gatsbyjs.org/tutorial/) </ins>

<ins> --- title: Static Site Generators --- ## Static web page Static web pages are often HTML documents stored as files in the file system and made available by the web server over HTTP (nevertheless URLs ending with ".html" are not always static). However, loose interpretations of the term could include web pages stored in a database, and could even include pages formatted using a template and served through an application server, as long as the page served is unchanging and presented essentially as stored. Static web pages are suitable for the contents that never or rarely need to be updated, though modern static site generators are changing. Maintaining large numbers of static pages as files can be impractical without automated tools, such as Static site generators described in the Web template system. Another way to manage static pages include Online compiled source code playgrounds, e.g. GatsbyJS and GitHub may be utilized for migrating a WordPress site into static web pages. Any personalization or interactivity has to run client-side, which is restricting. ## Static Site Generators A Static Site Generator is a program, that generates an HTML website as an output. This HTML website is then served through your web server, just like the olden days. This is usually achieved using template languages and code that separates out the layout of the website from its content and styles. ## How static sites work The proposition of a static site is to shift the heavy load from the moment visitors request the content to the moment content actually changes. Going back to our news kiosk metaphor, think of a scenario where it's the news agencies who call the kiosk whenever something newsworthy happens. The kiosk operators and scribbles will then compile, format and style the stories and produce a finished newspaper right away, even though nobody ordered one yet. They will print out a huge number of copies (infinite, actually) and pile them up by the storefront. When customers arrive, there's no need to wait for an operator to become available, place the phone call, pass the results to the scribble and wait for the final product. The newspaper is already there, waiting in a pile, so the customer can be served instantly. And that is how static site generators work. They take the content, typically stored in flat files rather than databases, apply it against layouts or templates and generate a structure of purely static HTML files that are ready to be delivered to the users. ## Advantages of static 1) Speed Perhaps the most immediately noticeable characteristic of a static site is how fast it is. As mentioned above, there are no database queries to run, no templating and no processing whatsoever on every request. Web servers are really good at delivering static pages quickly, and the entire site consists of static HTML files that are sitting on the server, waiting to be served, so a request is served back to the user pretty much instantly. 2) Version control for content You can't even imagine working on a project without version control anymore, can you? Having a repository where people can collaboratively work on files, control exactly who does what and rollback changes when something goes wrong is essential in any software project, no matter how small. But what about the content? That's the keystone of any site and yet it usually sits in a database somewhere else, completely separated from the codebase and its version control system. In a static site, the content is typically stored in flat files and treated as any other component of the codebase. In a blog, for example, that means being able to have the actual posts stored in a GitHub repository and allowing your readers to file an issue when something is wrong or to add a correction with a pull request — how cool is that? 3) Security Platforms like WordPress are used by millions of people around the world, meaning they're common targets for hackers and malicious attacks — no way around it. Wherever there's user input/authentication or multiple processes running code on every request, there's a potential security hole to exploit. To be on top of the situation, site administrators need to keep patching their systems with security updates, constantly playing cat and mouse with attackers, a routine that may be overlooked by less experienced users. Static sites keep it simple since there's not much to mess up when there's only a web server serving plain HTML pages. 4) Less hassle with the server Installing and maintaining the infrastructure required to run a dynamic site can be quite challenging, especially when multiple servers are involved or when something needs to be migrated. There's packages, libraries, modules and frameworks with different versions and dependencies, there are different web servers and database engines in different operating systems. Sure, a static site generator is a software package with its dependencies as well, but that's only relevant at build time when the site is generated. Ultimately, the end result is a collection of HTML files that can be served anywhere, scaled and migrated as needed regardless of the server-side technologies. As for the site generation process, that can be done from an environment that you control locally and not necessarily on the web server that will run the site — heck, you can build an entire site on your laptop and push the result to the web when it's done. 5) Traffic surges Unexpected traffic peaks on a website can be a problem, especially when it relies intensively on database calls or heavy processing. Introducing caching layers such as Varnish or Memcached surely helps, but that ends up introducing more possible points of failure in the system. A static site is generally better prepared for those situations, as serving static HTML pages consumes a very small amount of server resources. ## Disadvantages of static (and potential solutions) 1) No real-time content With a static site, you lose the ability to have real-time data, such as indication about which stories have been trending for the past hour, or content that dynamically changes for each visitor, like a "recommended articles for you" kind of thing. Static is static and will be the same for everyone. There's not really a solution for this, I'm afraid. It's the ultimate price to pay for using a static site, so it's important that you ask yourself the question "how real-time does my site need to be?" — if its concept is based around delivering real-time information then perhaps a static site isn't the right choice. A dangerous solution: There's an easy exit for whenever you're faced with the challenge of dynamically updating content on a static site: "I can do it with JavaScript". Doing processing on the client-side and appending the results to the page after it's been served can be the right approach for some cases, but must not be seen as the magic solution that turns your static site into a fully dynamic one. It can prevent some users from seeing the injected content, hurt your SEO and introduce other problems, potentially taking away the ease of mind and sense of control that comes with using a static site. 2) No user input Adding user-generated content to a static site is a bit of a challenge. Take a commenting system for a blog, for example — how do you process user comments and append them to a post using just plain HTML pages? You don't. </ins>


Question:
This PR () a new challenge so we need to create the associated guide article in this area of the code: you expressed interest in this - not sure if you started working on it yet. Let us know if you want to do it or not, or if you need any help. If you don't want to actually write the article you could just create the file and place the "stub text" in it.
I will give it a go.
How do I preview the guide locally? I get a 404 on all guides when I try to view them locally.
You will temporarily need to copy to and then run . Just make sure not to commit any of the files you add to the mock-guide.
Thanks for the info. Should the guide instructions not have this information? I don't think I saw this mentioned anywhere.
Probably should be in the instructions.

<ins> --- title: Use the value attribute with Radio Buttons and Checkboxes --- ## Use the value attribute with Radio Buttons and Checkboxes To pass the challenge, add the `value` attribute to the `input` elements of type `checkbox` and `radio`. Use the `input` label text, in lowercase, as the value for the attribute. The `value` attribute will make sure the choices are identifiable when the form is submitted. Example form with value attributes: ```html <form action="/submit-sandwich"> <label><input type="radio" name="bread" value="wheat"> Wheat</label> <label><input type="radio" name="bread" value="ciabatta"> Ciabatta</label><br> <label><input type="checkbox" name="fillings" value="chicken"> Chicken</label> <label><input type="checkbox" name="fillings" value="tuna"> Tuna</label> <label><input type="checkbox" name="fillings" value="mayo"> Mayo</label><br> <textarea placeholder="Allergies, and extra information"></textarea><br> <button type="submit">Order Sandwich</button> </form> ``` </ins>  No newline at end of file