Question: ## --answers-- <del> `What do she does as our team lead?` </del> <ins> `What do she does as the team lead?` </ins> ### --feedback--

The fill-in-the-blank sentence doesn't match what the character says. The written sentence is: The character says: Note the "the", instead of "our". No response Device: all OS: all Browser: all Version: all No response
Thank you for reporting the issue. Note for maintainers: Step 54 () uses "our" instead of "the" in the quiz. I think it's fine as-is since there isn't associated audio/caption text, but I'd vote updating it, too, for consistency. This issue is open to first-time code contributors to this repository. Requirements: In Change the text in the tag from to In Change the text in the tag from to Change the fill-in-the-blank text from to Change the backtick placement in the description text from ` In Change the text of the answers from to Please make sure you read our , we prioritize contributors following the instructions in our guides. Join us in our or our if you need help contributing; our moderators will guide you through this. Sometimes we may get more than one pull request. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.
Hi I've created a PR addressing these changes.


Question: **Tips** <del> - You can use the `el.style.display` property to show the `resetGameBtn` button and hide the `optionsContainer`. </del> <ins> Use the `style.display` property on an element, with the value `"block"` or `"none"`, to show or hide the element. </ins> # --hints--

In the last part of step 5 in the rock, paper, scissors review project, the instructions given say: If there is a winner, you will want to show the resetGameBtn button and hide the optionsContainer so the player can play again. Tips You can use the property to show the resetGameBtn button and hide the optionsContainer. I have 2 concerns here. 1- at no point is there any mention of what type of display the resetGameBtn requires (is it block, inline-block, flex...?) I guessed 'block' which worked but the lack of this detail made me hesitate. 2- the mention of '' is confusing. In the previous project, using style.display was discussed before in the rpg project () but it was never referred to or mentioned as '' before. I wasn't sure if 'el' meant the element in question or if there was an actual 'el' variable somewhere. I ended up going with what made sense (replacing the 'el' with the element reference) but I'm not sure how easy this would be for someone with only the last few js projects under their belt. A clarification would be great here. N/A N/A No response N/A No response
I fixed the wording of the challenge to make it more clear to the user.
This issue has not been triaged yet, in the future please do not create a PR until then. Anyway, I will open it up to contribution.
my bad sir, won't happen again.


Question:
className={`universal-nav${displayMenu ? ' expand-nav' : ''}`} id='universal-nav' >  <div className={`universal-nav-left${displayMenu ? ' display-search' : ''}`} > <Media minWidth={SEARCH_EXPOSED_WIDTH + 1}>{search}</Media>
   <Media minWidth={SEARCH_EXPOSED_WIDTH + 1}> <div className={`universal-nav-left${ displayMenu ? ' display-search' : '' }`} > {search}
 </Media>  <Link id='universal-nav-logo' to='/learn'> <NavLogo /> </Link>

When the user uses FreeCodeCamp on narrow screens like the Samsung galaxy fold, the FreeCodeCamp logo overlaps with the drop-down menu button and profile picture at the top of the page. to '' the developer tools dimensions select "Galaxy fold". the .png example in the screenshots section As a suggestion in this type of screens <= 280px * 653px we could remove the FCC fire logo or remove the profile picture to follow the responsive design rules. ! Device: [Laptop, Samsung Galaxy Fold, Pc] OS: [Android 12L ,Windows 11] Browser: [Chrome, OperaGx] No response
Bruce mentioned the possibility of changing the logo in this PR too I am kinda in favor, because of how many people started to associate freeCodeCamp with fCC, so change in logo may be possible. Note: that screens with size lower than aren't required to be supported as mentioned in his comment as well.
btw, the logo is on higher stack above the menu, so it isn't possible to click the menu. If we aren't changing the logo, changing the layout is the other option.
Hi What do you think about leaving only the "FreeCodeCamp" logo and removing the symbol? I think it would look more aesthetic xD and all the space would be fixed.
I think a part of the menu will still be blocked , but I hope I am wrong. Your suggestion may be better than fCC, but I don't know the workflow on removing and how important it's. Another dev or prolific contributor with more experience can indicate how important is the glyph.
I have solved this issue by dropping the fire icon. This is how it looks like. https://user-
Hey If you are working from a mobile Android device we recommend downloading the freeCodeCamp mobile app, which has a good mobile experience for the Responsive Web design certification.
Hey Thank you for making this change, although this works, it is in violation of our style guidelines. Please see them here: https://design-style-
yeah, I was thinking that it will go against the guidelines. I think putting the "sign in" button inside the "hamburger menu" for small screens can be a possible solution.
If I am reading the guidelines correctly then just the glyph can be used.

I'm sure the app is fine, but the web-based version should provide just as good an experience as the mobile app or we are doing something wrong. Also, just to be clear, since I might have started this in the first place, I am not insisting in any way that we adjust the header for very small widths. It was just an offhand suggestion in another PR that was somewhat related.
Yes. It probably wouldn't hurt to have a breakpoint that switched to the glyph, though I feel like this has been brought up (and turned down) before? might have more insight.
Hello, I am available to work on this issue. I believe I can solve this up you can Assignees the issue to me
I have resolved the Navbar logo responsiveness bug in the Galaxy Fold This is how it looks like.And i can Make a PR !
diff my name is vivek
diff my name is vivek my name is vivek yadav
We could go with the glyph or make the logo a bit more responsive. Either way would work.
Because there are 4 PRs opened doing the same thing, I want to clear the requirement to close this issue. The CSS solution, the issue is cased by the existing property of in , removing it and refactoring the layout of the navbar, will sort the issue as shown below, without the need to add another break point. Why am I against adding a break point? because it's a solution to a side effect and not the solution to the real cause of the issue The HTML solution, use element with fallback to glyph SVG. You can find the glyph in the .
For context, either solution is an enhancement to the navbar, so if a PR is fixing the CSS, while the other is changing the picture element, I wouldn't mind approving both, as both will be an enhancement to the current navbar. But maybe it's better to choose one option, before opening this for contribution so I am pushing it to triage again.
Shouldn't the element be conditionally rendered using the component instead of just being empty? That way it won't push the logo and the logo doesn't have to be position absolute. Code we have now wrapping the element instead. I only looked at this briefly so I will admit I might have missed something. Edit: I made a PR just to show what I mean.
Yeab, you are correct.


Question: return null; } <del> const { solution, githubLink, challengeFiles } = completedProject; </del> <ins> const { solution, githubLink, files } = completedProject; </ins> const onClickHandler = () => setSolutionState({ projectTitle, <del> challengeFiles, </del> <ins> files, </ins> solution, isOpen: true }); <del> if (challengeFiles) { </del> <ins> if (files) { </ins> return ( <button className='project-link-button-override'

When trying to view a JS solution, the following error appears in dev, explaining the issue in production. It seems we followed the expected prop-types too early (ref: ). The object is still an object literal. Reported on forum:
I have the same problem as I said in the forum, the bottom error says it responded with 404 to the request for the certification on JS algorithms and data structures. Seems like there's an issue with the backend reaching that certification. !


Question: <main> <Spacer size={2} /> <FullWidthRow> <del> <Button block={true} bsSize='lg' bsStyle='primary' className='btn-invert' href={`/${username}`} </del> <ins> <Link className='btn-invert btn btn-lg btn-primary btn-block' to={`/${username}`} </ins> > Show me my public portfolio <del> </Button> </del> <ins> </Link> </ins> <Button block={true} bsSize='lg'

To reduce making api calls we should use Link from client/src/components/helpers/Link that utilizes Gatsby Link.
I can take a look at this one


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

!
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


Question:
| Input number | Output number                         | | ------------ | ------------------------------------- | | 7259         | 2 hr, 59 sec             |  | 728640059    | 1 d                      |   | 86400        | 1 d                      |  | 6000000      | 9 wk, 6 d, 10 hr, 40 min |
Details

In this table, the left column represents the same duration as in the right column, but in seconds. The left middle-left cell should be instead of . <img width="293" alt="2021-05-25 -Learn Rosetta Code Convert seconds to compound duration freeCodeCamp org" src="https://user-"
Thanks for opening this issue. This looks something that can be fixed by "first time" code contributors to this repository. Here are the files that you should be looking at to work on a fix: List of files: Please make sure you read , we prioritize contributors following the instructions in our guides. Join us in our chat room or the forum if you need help contributing, our moderators will guide you through this. Sometimes we may get more than one pull-requests. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.


Question: # --hints-- <del> You should call the `square_root_bisection` function with the `N` variable as the argument and print the result. </del> <ins> You should call the `square_root_bisection` function with the variable `N` as the argument. </ins> ```js ({

this makes look like you need to use , but the function call is enough to cause an output to the terminal. Possible solutions: NA NA NA No response
I'd update the instructions removing the part.
Hi, I'm looking to contribute to open source, could I take this ticket on as a way to onboard to this codebase? And also what is the process usually for grabbing a ticket and pushing a PR?
We typically do not assign issues. Instead, we accept the first pull request that comprehensively solves the issue. Issues labelled with or are open for contributions. Please make sure you read . We prioritize contributors following the instructions in our guide. Join us in or if you need help contributing - our community will be happy to assist you.


Question:
## Instructions
  Use multiple conditional operators in the checkSign function to check if a number is positive, negative or zero.   Use multiple conditional operators in the checkSign function to check if a number is positive, negative or zero. The function should return "positive", "negative" or "zero".
 ## Tests

<!-- 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 instruction of challenge only tells user what they need to do, but not what their code should return. User would need to scroll down to see what the tests expect, in order to complete the challenge. Add a Link to the page with the problem:


Question: # --description-- <del> Another important `meta` tag for accessibility and SEO is the `description` definition. The value of the `content` attribute is used by search engines to provide a description of your page. </del> <ins> Another important `meta` element for accessibility and SEO is the `description` definition. The value of the `content` attribute is used by search engines to provide a description of your page. </ins> <del> Add a `meta` tag with the `name` attribute set to `description`, and give it a useful `content` attribute. </del> <ins> Add a `meta` element with the `name` attribute set to `description`, and give it a useful `content` attribute. </ins> # --hints-- <del> You should add a new `meta` tag to the `head`. </del> <ins> You should add a new `meta` element to the `head`. </ins> ```js assert.equal(document.querySelectorAll('meta').length, 3);

related to In the new Responsive Design curriculum the words tag and element are used interchangebly The correct use should be element and tag (or at least, element is the whole thing, tag is the one that start with and end with and can be an opening tag, a closing tag or a self-closing tag). Should this be changed in the new curriculum?
Do we have many/any incorrect uses?
actually mostly not - there is some ambiguity with in the second step of the accessibility quiz I have been hasty
My concern was with these steps, which are about meta tags
That does look like something that should be standardised. Thank you, for listing them. I am opening this issue up for first timers only. The files that need changed are listed in the above reply. What needs changed There are a few uses of the word which should be changed to . Example Original: New: Note Not all uses of the word should be changed. Example: An issue with the help wanted or first timers only label is open for contribution. The first comprehensive PR created will be reviewed and merged. We typically do not assign issues to anyone other than long-time contributors. If you would like to contribute, and have not read the contributors docs, please do so here: If you have any issues with contributing, be sure to join us on the , or on the
Hi - is it ok if i pick this up? First timer here


Question: const DEBOUNCE_TIME = 100; <del> const searchClient = algoliasearch(algoliaAppId, algoliaAPIKey); </del> <ins> // If a key is missing, searches will fail, but the client will still render. const searchClient = algoliaAppId && algoliaAPIKey ? algoliasearch(algoliaAppId, algoliaAPIKey) : {}; </ins> const propTypes = { children: PropTypes.any,

Is there any reason not to put the real and in ? I reflexively put in a dummy key when I set this up, but now that I revisit this, that seems like a mistake.
Yes, actually it broke the .dev build unsurprisingly , I think noticed it and reported in the team chat. My bad for not catching this previously. The real fix is to ignore and move ahead when the keys are not available are default. We do this with google application credentials.
Oh, I assume it broke the build because .dev isn't using I didn't think of that... So, we should implement the fix and add the public keys to , right?
I was thinking something more along the lines of (example from api-server): I would try to avoid hundreds of contributors hitting the indexes locally. Ideally people should get their own keys. While the key and index is public, it's still not recommended to hit it?
As for the production keys, it's actually fine because the build should fail. I have since the keys in the build pipeline.
One thing: if we don't want contributors spamming search (fair enough!) I think there should be some docs that let people know what's what. Either that search isn't available in development or the steps they need to take to make it work.
I agree. We should add some docs on getting keys, or perhaps creating a test index and sharing that instead


Question: extends ../layout-wide block content .row <del> .col-md-4.bonfire-top </del> <ins> .col-md-4 </ins> h4.text-center= name hr ol for step, index in description .row.checklist-element(id="#{dashedName + index}") <del> .col-xs-3.col-sm-1.col-md-2.padded-ionic-icon.text-center </del> <ins> .col-xs-2.col-sm-1.col-md-2.padded-ionic-icon.text-right </ins> input(type='checkbox' class='challenge-list-checkbox') <del> .col-xs-9.col-sm-11.col-md-10 </del> <ins> .col-xs-10.col-sm-11.col-md-10 </ins> li.step-text.wrappable!= step .col-xs-12.col-sm-12.col-md-8 .embed-responsive.embed-responsive-16by9

Anywhere from 1000px width to when the UI goes into responsive mode the numbers on the check list move into it's respective check box. Image posted bellow <img width="1109" alt="screen shot 2015-12-17 at 9 08 15 pm" src=""
Confirmed, although this is a pretty marginal corner case. There is maybe a 200px wide zone where there is overlap.
It happens quite a bit for me. Regardless I just want a softball for my first issue :) , Rex Schrader wrote: * |
This really isn't the issue with new UI (width < 760px). However, now checkboxes are awkwardly too far. !


Question: "difficulty": 3.04, "description": [ "You can also target elements by their id attributes.",  "First target your div element with the id target3 by using the $("#target3") selector.",   "First target your button element with the id target3 by using the $("#target3") selector.",  "Note that, just like with CSS declarations, you type a # before the id's name.", "Then use jQuery's .addClass() function to add the classes animated and fadeOut.", "Here's how you'd make the button element with the id target6 fade out: $("#target6").addClass("animated fadeOut")."

Challenge has an issue. Please describe how to reproduce it, and include links to screenshots if possible. First target your div element with the id target3 by using the $("#target3") selector. div needs changing to button.
This is a duplicate of issue .


Question: const res = await fetch('https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/red'); // Fetch from proxy to simulate network delay if (!res.ok) { <del> await new Promise(resolve => setTimeout(resolve, 50)); // Brief additional delay to allow the alert to trigger </del> <ins> await new Promise(resolve => setTimeout(resolve, 1000)); // Additional delay to allow the alert to trigger </ins> assert.include(['pokémon not found', 'pokemon not found'], alertMessage.trim().replace(/[.,?!]+$/g, '').toLowerCase()); }

When testing one camper's code it fails some tests unless I increase all the delays to 1000ms, I tested with 500ms but that was not enough. I also saw the example project fail a test but it does pass more consistently (my guess is it is just faster with fewer async functions). To be on the safe side we should have a longer delay. I know 1000ms is a lot but better safe than sorry. Tests: Valid code should not fail because of "timing" issues. No response Device: [e.g. iPhone 6, Laptop] OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04] Browser: [e.g. Chrome, Safari] Version: [e.g. 22] Forum:
As this is a bug with a certificate project I the showstopper label.


Question: if (err) { next(err); } <ins> var dashedNameFull = bonfire[bonfireNumber].name.toLowerCase().replace(/s/g, '-'); if (dashedNameFull != dashedName) { return res.redirect('/bonfires/' + dashedNameFull); } </ins> if (bonfire.length < 1) { req.flash('errors', { msg: "404: We couldn't find a bonfire with that name. Please double check the name."

From with feedback as Awesome work with the new radio! It's got much better performance than YouTube. Thought this feature was missing so I a simple version :) One known issue is that the song history won't update immediately after a song completes, but regularly every 20 seconds. This cause a slight delay when songs are changing. Perhaps song history updates could happen once some event inside the embedded coderadio player happens? I don't know what event to listen to, but that would be a significant improvement. !
I can work on creating a Song History component! :) Edit: Here what it looks with what I have: !
Hi everyone, I'm wondering if I can get repo right to push my branch so I can raise a PR for this feature. :)
Hey Brandon! Awesome you worked on this feature! You can fork the repo to your own GitHub account and then push your branch there. Then you can submit the PR even without write access directly to this repo. Have a nice day!


Question: <ins> const isBrowser = typeof window !== 'undefined'; if (isBrowser) { window.dataLayer = window.dataLayer || []; } function gtag() { if (isBrowser) { window.dataLayer.push(arguments); } } gtag('js', new Date()); gtag('config', 'AW-795617839'); export function gtagReportConversion(url) { var callback = function() { if (typeof url !== 'undefined' && isBrowser) { window.location = url; } }; if (isBrowser) { gtag('event', 'conversion', { /* eslint-disable camelcase */ send_to: 'AW-795617839/AmfiCKHHs4gBEK_UsPsC', event_callback: callback }); } return false; } </ins>

I can work on this. A little confused though, since it appears to be there already. Does the mission statement go here? Please provide instructions, thanks.


Question: JavaScript has seven primitive data types, with `String` being one of them. In JavaScript, a <dfn>string</dfn> represents a sequence of characters and can be enclosed in either single (`'`) or double (`"`) quotes. <del> Note that strings are <dfn>immutable</dfn>, which means once they are created, they cannot be changed. </del> <ins> Note that strings are <dfn>immutable</dfn>, which means once they are created, they cannot be changed. The variable can still be reassigned another value. </ins> Change your `"Hello"` string to use single quotes.

on it says For a beginner, this could be misleading, as they might think, they cannot change the variable. A description like:
We should avoid parenthetical information like that whenever we can, in my opinion. It makes the sentence much harder to parse.
Is it even worth mentioning here? The lesson doesn't show any consequences of immutability, so it might simply be better to remove the sentence.
I feel like it should be mentioned somewhere, but probably the first lesson where its needed
I think it is part of teaching strings. Here is how MDN words it: But it would certainly be worth circling back to it when it becomes relevant to make sure the practical implication of it is shown.
The description accurately mentions that strings in JavaScript are immutable, meaning their contents cannot be changed once created. However, it's important to clarify that while strings themselves are immutable, the variables holding them can be reassigned to new values. Therefore, no changes are necessary in this instance.
I agree, the description is correct, though for someone encountering variables, strings and immutability for the first time, they might get confused, thinking they cannot change the variable as it is a string, which is immutable. you learn how to reassign variables. Maybe not mentioning immutability at this early stage is the better choice.
Good point! Reassigning variables is key. Perhaps mentioning immutability later reinforces the distinction between variable and data type
I would be fine moving it to somewhere closer to where something like array mutation is taught.
I think we should at least update the text to say the variable can be reassigned another value. This early on in the learning process, the difference between a "value" and a "variable containing a value", is likely not that well understood. In some other challenge step, we then show what it actually means that a primitive value is immutable. After they know how to index into a value, then we can show an attempt to update an immutable value directly and explain why it doesn't work.
Let's start there, then. A PR which resolves this issue will update the text: To the text:


Question: "User Story: I can edit these recipes.", "User Story: I can delete these recipes.", "User Story: All new recipes I add are saved in my browser's local storage. If I refresh the page, these recipes will still be there.",  "Hint:  You should prefix your local storage keys on CodePen, i.e. _username_recipes",  "Remember to use Read-Search-Ask if you get stuck.", "When you are finished, click the "I've completed this challenge" button and include a link to your CodePen.", "You can get feedback on your project from fellow campers by sharing it in our Code Review Chatroom. You can also share it on Twitter and your city's Campsite (on Facebook)."

I think there should be something to the project description for the recipe box project, that suggests that you should prefix the localStrorage keys. If a bunch of people use recipeBox for instance but use different data structures, someone else's app is gonna have problems looking for one format, but receiving another, if that key is already taking.


Question: Create a `.env` file in the root of your project directory, and store the variable `MESSAGE_STYLE=uppercase` in it. <del> Then, in the `/json` GET route handler you created in the last challenge, transform the response object's message to uppercase if `process.env.MESSAGE_STYLE` equals `uppercase`. The response object should either be `{"message": "Hello json"}` or `{"message": "HELLO JSON"}`, depending on the `MESSAGE_STYLE` value. </del> <ins> Then, in the `/json` GET route handler you created in the last challenge access `process.env.MESSAGE_STYLE` and transform the response object's `message` to uppercase if the variable equals `uppercase`. The response object should either be `{"message": "Hello json"}` or `{"message": "HELLO JSON"}`, depending on the `MESSAGE_STYLE` value. </ins> **Note:** If you are using Replit, you cannot create a `.env` file. Instead, use the built-in <dfn>SECRETS</dfn> tab to add the variable.

We get so many forum posts all with the same issue with this challenge. People are accessing the environment variables outside the route handler, which doesn't work with the test. If we can somehow make it more clear where the variable should be accessed it would really help. Challenge:
I agree that this continues to be a problematic challenge, but how much clearer do you get than:
I don't actually think the sentence makes it that clear that the environment variable has to be evaluated inside the route handler. I would consider it unexpected behavior and it should be explained better. Or restructure the sentence somehow.
It's a bit of a clunky structure and I agree it could be worded better.


Question:
} </style>

Quincy Larson

@ossia

<!-- 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 Twitter image in this challenge is broken: If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box): <img width="1431" alt="LearnCSSFlexboxUsethealign-itemsPropertyintheTweetEmbedfreeCodeCamp_org" src="https://user-"


Question:
], "nameEs": "Crea una máquina de frases aleatorias", "descriptionEs": [  "Objetivo: Crea una aplicación con CodePen.io que reproduzca efectivamente mediante ingeniería inversa este app: http://codepen.io/FreeCodeCamp/full/bELoPJ.",   "Objetivo: Crea una aplicación con CodePen.io cuya funcionalidad sea similar a la de esta: http://codepen.io/FreeCodeCamp/full/bELoPJ.",  "Regla #1: No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",  "Regla #2: Puedes usar cualquier librería o APIs que necesites.", "Regla #3: Usa ingeniería inversa para reproducir la funcionalidad del proyecto de ejemplo, pero también siéntete en la libertad de personalizarlo.", "Las siguientes son las historias de usuario que debes satisfacer, incluyendo las historias opcionales:", "Historia de usuario: Como usuario, puedo pulsar un botón que me mostrará una nueva frase aleatoria.", "Bonus User Story: Como usuario, puedo presionar un botón para twitear una frase.", "Recuerda utilizar Read-Search-Ask si te sientes atascado.", "Cuando hayas terminado, pulsa el botón de "I've completed this challenge" e incluye un link a tu CodePen. Si programaste en pareja, debes incluir también el nombre de usuario de Free Code Camp de tu compañero.", "Si quieres retroalimentación inmediata de parte de tus compañeros campistas, pulsa este botón y pega el link de tu proyecto en CodePen.

Pulsa aquí y agrega tu link en el texto del tweet"   "Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería o APIs que necesites.", "Historia de usuario: Puedo pulsar un botón que me mostrará una nueva frase aleatoria.", "Bonus User Story: Puedo presionar un botón para twitear una frase.", "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado.", "Cuando hayas terminado, pulsa el botón de "I've completed this challenge" e incluye un enlace a tu CodePen.", "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra Sala de chat para revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."  ], "isRequired": true, "challengeType": 3

[x] Show the Local Weather [x] Stylize Stories on Camper News [x] Build a Wikipedia Viewer [x] Use the JSON API [x] Build a Tic Tac Toe Game [x] Build a Simon Game
Working on this one


Question: ## Descripción <section id='description'> <del> Una descripción del desafío y de los requerimientos aprobatorios </del> <ins> Una descripción del desafío y de los requisitos aprobacion </ins> </section> ## Instrucciones

from its english version at from its english version at from its english version at from its english version at from its english version at from its english version at  When you make a PR for this particular issue, do not tag it with instead just reference it with
Hey ! How could I claim so we don't double work? Thanks
Hi ! Actually we just merge in the first PR for open issues. And your comment on this thread is enough. So, its yours. Happy translating.
I just open a PR for
thanks a lot that was fast! Would you be interested in translating these in future as well? If yes, please keep a watch on this thread. We will be updating on the progress often Happy contributing.
Done translating ! My PR is available at ! Thanks for all you do, freeCodeCamp
I have sent a translation proposal for /docs/how-to-work-on-guide- PR Hope it will help!
There is still work pending on this. When you make a PR for this particular issue, do not tag it with instead just reference it with
Hello, I'm starting to help on the translation of the document /how-to-set-up-freecodecamp-
Working on /docs/spanish/how-to-work-on-guide-
Hello, I've improved the file
Hello, Improving docs/spanish/how-to-catch-outgoing-emails-
Hi, I'm improving docs/spanish/how-to-work-on-coding-
Hi, can I help with /docs/spanish/how-to-setup-freecodecamp-
Sorry, I opened a bad PR regarding but already closed it. I found there was still an English part to be translated
Hi! Is there any remaining documentation where I can help translate?
you can improve or fix redaction and spelling errors.
Hi there, It would be good if at the top are checked so we can see what is left to be translated. Thanks
Where I can start helping?
sorry to put it in this issue, but is there any way somebody could help with the pull requests? I mean, there are 5K+ opened already, people are sending them in troves, and I suspect a lot of them are a total crap (Like ) . I guess you opened a Pandora Box with your articule about HacktoberFest.

Hey all, not a translation, but fixes for the language bar of HTML links on the README file for Spanish, and markdown links to the How To guides that everyone has been translating. . or anyone else looking to do translations in Spanish, you could make a copy of the 2 style guides to translate into Spanish from the English version in the doc folder. It looks like those weren't in to the Spanish folder originally or included on this issue. Just leave the title the same, but put it in the Spanish folder
Hola! to all. I believe we should have guidelines for Spanish translations, which include what treatment (formal or informal) to use when referring to actions or the user. For example, Agregue (formal) or Agrega (informal). - I don't know if this kind of things are found in other languages. In the last articles I've read I've seen a mix between formal and informal, and I think we should standardize (I have done it with some articles). I propose to always use informal. Another thing that could be specified in the guidelines is: Challenges translations. Should they be translated? Referrals to types and attributes (which need to be in English for proper coding). For example, type "date" not type "fecha". If there is a guideline already, please let me know, if not, I would be happy to start one (just let me know where to put it). Hey I would like to know your thoughts about this. Thanks to you all and happy coding!
I agree that we should standardize around informal. I agree with you that we should look out for words like "fecha" that have been accidentally translated during our automated translation process.
Hi all I'm not sure if this is the right issue to discuss this, or if I should open a new one. I'm happy to open a new one if that makes things easier to track. I'll keep it here for the moment. What do people think about translating "array" as "arreglo"? I think this is a big mistake that has been repeated since somebody made that bad translation many years ago. As any Spanish speaker know, "arreglo" means "repair" (), and it makes any programming related text even harder to understand.

This is especially true for programming texts because it's full of abstract nouns and things that are not easy to represent in a tangible way. I learned to code in English (mainly FCC and Coursera), and after a while, I stumbled upon a programming text written in Spanish. I couldn't understand what it was talking about until I found out that "arreglo" was the (really bad) translation of "array". Then I could read the text as if I was reading an encoded message that had to be deciphered. I propose that the Spanish version of FreeCodeCamp doesn't carry on with that translation, which is just based on the similarity of the spelling but has nothing to do with the meaning of the words. I think the right term in Spanish is "ristra". According to the : Which basically means: "A group of things placed one after another" They also share all the phonems in "array", with the adittion of /r/ (rolling r) and /t/ in "ristra". I'm open to other candidates, but please, let's take "arreglo" out of the Spanish version. The word "array" has been used in Spanish texts before and even though it's not a Spanish word, I think it's still better than a word that exists with a different meaning. And to be honest, anyone learning how to code will have to become familiar with certain English terms like "list", "function", "import", "scope", etc. [1]: [2]:
Hello guy, I vote for yes, let’s do the change and I think will create a huge impact around of the world! Please let me know if you have more question questions or concerns. Andres Haro Cell: (619) 534-3190
Thanks - I agree that these machine translations need improvement. I encourage you to dig in and start fixing them. Be sure to join if you need help getting set up
There is still work pending on this. When you make a PR for this particular issue, do not tag it with instead just reference it with
Thanks for working on the translations for the "Contributing to freeCodeCamp". Here on we are making contributing to translations for contribution docs ad hoc. You are free to make pull-requests for improving these translations.

We are closing the issue as these do not need tracking per se. You can raise a fresh issue if you find something incorrect in the existing docs.


Question: ```js const stat = document.querySelectorAll('.stat')[2]; <del> assert.equal(stat.innerText, 'Gold: 50'); </del> <ins> assert.equal(stat.innerText.trimEnd(), 'Gold: 50'); </ins> ``` # --seed--

I was helping a with in the new JS curriculum and they weren't able to pass the tests because of the way they formatted their answer. Here was their code We should allow for that code to pass because they got it right. Here are the current tests For all of the tests that use we should instead update it to use a regex solution with instead. That will make it possible for campers to submit answers with different spacing. All of the tests with the to make sure they have a or element should stay the same though. For those, interested in working on this issue, please read through the first. There will be no assignment for this issue. If you are interested in working on it, then you can submit a PR The following code should pass regardless of different formatting with spaces. No response Device: [e.g. iPhone 6, Laptop] OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04] Browser: [e.g. Chrome, Safari] Version: [e.g. 22] No response


Question: # --description-- <del> Before playing the song, you need to make sure it starts from the beginning. This can be achieved by the use of the `currentTime` property of the `audio` object. </del> <ins> Before playing the song, you need to make sure it starts from the beginning. This can be achieved by the use of the `currentTime` property on the `audio` object. </ins> <del> Add an `if` statement to check whether the `userData?.currentSong` is `null` or if `userData?.currentSong.id` is strictly not equal `song.id`. Inside `if` block, set the `currentTime` property of the `audio` object to `0`. </del> <ins> Add an `if` statement to check whether the `userData?.currentSong` is falsy *OR* if `userData?.currentSong.id` is strictly not equal `song.id`. This condition will check if no current song is playing or if the current song is different from the one that is about to be played. Inside `if` block, set the `currentTime` property of the `audio` object to `0`. </ins> # --hints-- <del> You should create an `if` statement with the condition `userData?.currentSong === null || userData?.currentSong.id !== song.id`. </del> <ins> You should create an `if` statement with the condition `userData?.currentSong === null || userData?.currentSong.id !== song.id`. Don't forget to include optional chaining. </ins> ```js <del> assert.match(code, /ifs*(s*userData?.currentSongs*===s*nulls*||s*userData?.currentSong.ids*!==s*song.ids*)s*{s*/) </del> <ins> assert.match(code, /ifs*(s*(?:(?:!userData?.currentSong|s*userData?.currentSongs*===s*null)s*||s*userData?.currentSong.ids*!==s*song.ids*|s*userData?.currentSong.ids*!==s*song.ids*||s*(?:!userData?.currentSong|s*userData?.currentSongs*===s*null))s*)s*{/) </ins> ``` You should set `audio.currentTime` to `0` inside your `if` block. ```js <del> assert.match(code, /ifs*(s*userData?.currentSongs*===s*nulls*||s*userData?.currentSong.ids*!==s*song.ids*)s*{s*audio.currentTimes*=s*0s*;?s*}/) </del> <ins> assert.match(code, /ifs*(s*(?:(?:!userData?.currentSong|s*userData?.currentSongs*===s*null)s*||s*userData?.currentSong.ids*!==s*song.ids*|s*userData?.currentSong.ids*!==s*song.ids*||s*(?:!userData?.currentSong|s*userData?.currentSongs*===s*null))s*)s*{s*audio.currentTimes*=s*0s*;?s*}/) </ins> ``` # --seed--

There are a few grammar issues in this description. Plus the description can be broken up with spacing a little bit better for readability. Also the tests are looking for a specific answer of for the condition. But I don't see why we need to specifically check for when either of these options would be valid The tests should be more flexible to allow any valid answer. Also, order shouldn't matter here because we want to test that campers understand the concept. Not forcing a particular order here. This should pass but currently doesn't see explanation above see explanation above No response Device: [e.g. iPhone 6, Laptop] OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04] Browser: [e.g. Chrome, Safari] Version: [e.g. 22] No response
There's slight issue with this. If the concept in this step is using the , in a way where order doesn't matter, this is not the best example. Second part is obsolete, there's no way that could be when it is reached in this order. It will always be . If is , then second part is skipped by definition. If is , because it didn't throw (see below) then must exists, therefore cannot beIt can throw error. The point of using in the condition above (where second condition depends on the first one) is that the second part is checked only when first part is . In this case it means that is not , so it is possible to check what is the value of . Otherwise, when is , will throw error:What about ? (notice the second question mark in the first part). Well... the second condition is then again obsolete.
If order does matter then the directions need to specify that. Otherwise, campers will not understand why this should be allowed to pass either an update needs to be to the directions on hint text. Or both.
Despite of using the logical OR, order in this statement is important, as depends on the existence of . What do you think?
I like it. I would just change the first part to this


Question: | Feature | Variable Type | Variable      | Value Type | |:-------:|:------------:|:-------------:|:----------:| <del> | Age | Objective Feature | age | int (days) | | Height | Objective Feature | height | int (cm) | | Weight | Objective Feature | weight | float (kg) | | Gender | Objective Feature | gender | categorical code | | Systolic blood pressure | Examination Feature | ap_hi | int | | Diastolic blood pressure | Examination Feature | ap_lo | int | | Cholesterol | Examination Feature | cholesterol | 1: normal, 2: above normal, 3: well above normal | | Glucose | Examination Feature | gluc | 1: normal, 2: above normal, 3: well above normal | | Smoking | Subjective Feature | smoke | binary | | Alcohol intake | Subjective Feature | alco | binary | | Physical activity | Subjective Feature | active | binary | | Presence or absence of cardiovascular disease | Target Variable | cardio | binary | </del> <ins> | Age | Objective Feature | `age` | int (days) | | Height | Objective Feature | `height` | int (cm) | | Weight | Objective Feature | `weight` | float (kg) | | Gender | Objective Feature | `gender` | categorical code | | Systolic blood pressure | Examination Feature | `ap_hi` | int | | Diastolic blood pressure | Examination Feature | `ap_lo` | int | | Cholesterol | Examination Feature | `cholesterol` | 1: normal, 2: above normal, 3: well above normal | | Glucose | Examination Feature | `gluc` | 1: normal, 2: above normal, 3: well above normal | | Smoking | Subjective Feature | `smoke` | binary | | Alcohol intake | Subjective Feature | `alco` | binary | | Physical activity | Subjective Feature | `active` | binary | | Presence or absence of cardiovascular disease | Target Variable | `cardio` | binary | </ins> ## Tasks

This markdown table is missing backticks around the variables (third column). This looks like something that can be fixed by "first-time" code contributors to this repository. Here are the files that you should be looking at to work on a fix: List of files: Please make sure you read our , we prioritize contributors following the instructions in our guides. Join us in our or our if you need help contributing; our moderators will guide you through this. Sometimes we may get more than one pull request. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.
Hi , this seems like an issue that i can handle. I am new to freecodecamp repository and would love to contribute
Thank you for your interest! I suggest looking at issues that do not have linked PRs already


Question: : ''; 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.

I can't change my email address on the settings page. Anyone one else want to confirm this?
Happy to help on this - I poked around a bit and believe I've found the source of the bug. Also glad to point you in that direction if you prefer to handle this since you've already assigned it to yourself.
Sure, thing go for a PR if you have something ready.
I have a WIP PR ready - cool if I open that?
Do it you can use draft mode if it's not ready.

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


Question: "tests": [], "type": "basejump", "challengeType": 4,  "isRequired": true   "isRequired": true, "nameEs": "Microservicio para acortar URLs", "descriptionEs": [ "Objetivo: Arma una aplicación de Pila Completa en JavaScript que sea funcionalmente similar a esta: https://shurli.herokuapp.com/ y despliegala en Heroku.", "Ten en cuenta que para cada proyecto, deberías crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas como hacer esto, vuelve a visitar http://freecodecamp.com//challenges/get-set-for-our-back-end-development-projects.", "Aquí están las historias de usuario específicas que debes implementar para este proyecto:", "Historia de Usuario: Puedo pasar una URL como parámetro y recibiré una URL acortada en la respuesta JSON.", "Historia de Usuario: Si paso una URL inválido que no siga el formato válido http://www.exmaple.com, en cambio la respuesta JSON contendrá un mensaje de error.", "Historia de Usuario: Cuando visite el URL acortado, me redirigirá a mi enlace original.", "Una vez que hayas terminado de implementar estas historias de usuarios, pulsa el botón "I've completed this challenge" e introduce los URLs de tu repositorio en GitHub y de tu aplicación en vivo en Heroku.", "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra Sala de chat para revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)." ]  }, { "id": "bd7158d8c443edefaeb5bdee",

[x] Get Set for our Back End Development Projects [x] Timestamp Microservice [x] Request Header Parser Microservice [x] URL Shortener Microservice [x] Image Search Abstraction Layer [x] File Metadata Microservice
Currently working on this.
I just used part of the PR that you closed. Thank you. Blessings.


Question: text-align: center; } <ins> .big-ion-up-arrow  #upvote, #reply-to-main-post { cursor: pointer; } </ins> .story-up-votes { padding-top: 0px; margin-left: -5px;

In the challenge "Debugging: Understanding the Differences between the freeCodeCamp and Browser Console" the objective asks the user to whereas in the content, the user has access to two prewritten variables: and , no variable exists. Browser Name: Google Chrome Browser Version: 67.0.3396.99 (64 bits) Operating System: Windows 10 !
I'd like to give it a go.


Question: 1. Guía de estilo sobre cómo crear Guías. 2. Guía de estilo sobre cómo crear Desafíos de programación. <del> ## Referencía rápida de comandos para trabajar en local </del> <ins> ## Referencia rápida de comandos para trabajar en local </ins> Una referencia rápida de los comandos que necesitarás cuando trabajes en local.

<!-- 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: There's a spelling mistake on the Spanish documentation's ReadMe Add a Link to the page with the problem: Tell us about your browser and operating system: Browser Name: Chrome Browser Version: 69.0.3497.100 Operating System: MacOS If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box): !


Question: 35, 0.35 ), <del> 75300 </del> <ins> 75900 </ins> ); ```

Describe your problem and how to reproduce it: One of the tests in this challenge has wrong result, both in test code and description. It says: This isn't correct. For example: knapsack having 11 panacea, 3 ichor and 15 gold has value , while being within the weight and value constrains: This seems to be case of precision issue. Multiplication input item weights, volumes and max values for those parameters, to start operations without decimals, makes result as it should be, also for the problematic test. Add a Link to the page with the problem:
Yes, it seems you are right - do you want to propose a solution?
Yes, sorry. The least invasive way to correct the seems to be to multiply in function, by the same factor, initial items weights, volumes, and in the first recursive call multiply and . This is enough to make calculations on integers and get correct answers. I don't know if just such change would be okay or if more desirable would be more elaborate rewrite of solution. Or at least changing to / and renaming some variables to better names.
would you be willing to open a PR for it so that the challenge can be changed? you can also contribute to the guide by opening a topic in the #subforum category in the forum
Definitely yes, although I need advice which approach here would be preferred. Considering that the sample solution in code is just used for internal testing and just small change to it can fix the issue.


Question: More resources:  -  Notebooks on GitHub   -  Notebooks on GitHub  -  How to open Notebooks from GitHub using Google Colab. # --question--

Out of the 2 points in the "More resources:" section, the first point has a typo that has caused it to render in an unintended manner. Check this the point should be rendered as "Notebooks on GitHub" with an underline and should be clickable. ! I used a web browser(chrome) but I believe its a common issue for every device. No response


Question: <Link className='large-p underlined-link' external={true} to='/donate'> make a tax-deductible donation here </Link> <ins> . </ins> </p> <del> .<Spacer /> </del> <ins> <Spacer /> </ins> <BigCallToAction /> <Spacer /> <Spacer />

There's a period on its own paragraph on the home page... ! Here's where the issue lies... Perhaps adding the period in the tag


Question: _ = require('lodash'), fs = require('fs'), <del> constantStrings = require('constantStrings.json'), </del> <ins> constantStrings = require('./constantStrings.json'), </ins> User = require('../models/User'), Challenge = require('./../models/Challenge'), Story = require('./../models/Story'),

Seeing this in production here: solution: Use and/or check for user existence and end early. cc:


Question: ] ], "type": "hike",  "challengeType": 6   "challengeType": 6, "nameEs": "JavaScript Lingo: Encontrando e indexando valores en vectores", "descriptionEs": [ "Hay muchas razones por las que puedes necesitar acceder a una determinada pieza de información al interior de un conjunto más amplio, lo cual haces referenciando su índice.", "No vamos a entrar en la sintaxis, pero debes saber que el primer elemento en un vector tiene en realidad el índice 0.", "Esto también aplica para cadenas y objetos. Todos estos índices comienzan en 0, por lo que si en tu programa usas miVector[2], realmente vas a obtener la tercera pieza de información del vector miVector." ]  }, { "id": "56b15f15632298c12f315188",

[ ] JavaScript Lingo: MDN and Documentation [ ] JavaScript Lingo: Value Types [ ] JavaScript Lingo: Variables & camelCase [ ] JavaScript Lingo: Arrays & Objects [ ] JavaScript Lingo: Finding and Indexing Data in Arays [ ] JavaScript Lingo: Manipulating Data [ ] JavaScript Lingo: Math [ ] JavaScript Lingo: Loops [ ] JavaScript Lingo: Regular Expressions
Working on this one


Question: 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({

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?

When viewing my Legacy Data Visualization Certificate, the Issued date in the top right corner always displays the current date, not the date the Certificate was completed. See: (appears to always have the current date there)
I'll also add, although it may need a new thread or belong somewhere else, that the legacy certificates that were already earned should not be rebranded as "legacy certificates" because it devalues the work that went into getting them when they were not legacy. The date issued and the certificate should suffice. Universities don't send out new diplomas when they change their curriculum with new information saying your BS/MS/MA/MD degree is "legacy".
Rebranding the certificates as "legacy" could also cause problems for folks job hunting. Potential employers seeing a "legacy certificate" may conclude that the work accomplished is already out of date.
I see seemingly correct dates for my legacy front-end and back-end certs, but the legacy data visualization is showing today's date. any thoughts on removing the "legacy" label - they do make a good point, although there would be two certs with the same name (data visualization) - which could be confusing or cause problems.
I've been poking around the code a bit for this one. My guess is that in , line 427, completeDate is null, which would always give the current date for the ctor of the Date class when this happens. Which implies that somehow completeDate isn't getting set. I'm still working through lines 418-421 trying to guess what's going on there (my background is C / C++, so declaring const {} on the left hand side is throwing me for a loop).
so the user object probly looks like this... obviously with a bunch of other properties in the user object as well I think pulls the completedChallenges array from the user object and sets it to the completedChallenges variable - and maybe gives and empty array as a default value if its not found - i think that's how it works this lesson and the ones following it might help...
Thanks . I also found this last night So completedChallenges is an array pulled from the user object using destructuring with a default assignment. completedDate is looking through the completedChallenges array (".find(...)") trying to match id with the certId.

I'll guess completedChallenges is an array of objects, in which each object includes an id and completedDate field. This code is used for all certs, but only the Legacy Data Visualization has a problem here, so this code in and of itself is probably correct. Which implies that the data being fed into it is a problem, such that it can't find a completedDate for the Legacy Data Visualization cert only. So my thoughts are: Possible mismatch between id and certId. Did this id change inadvertently between the old site and the new site? Were completedDates saved for the old Data Visualization Certificate in the first place? I think the next step to debug this would be to just the values of id, certId, & completedChallenges[] on an instance with access to whatever backend storage FreeCodeCamp actually uses. Should be easy to find from that point on, since this is 100% reproducible. Unfortunately, I don't have that kind of access, so I don't think I'm going any farther with this bug. Hopefully this offers a jump start to whomever picks this bug up in the future.
nice digging - I wonder if it's a naming conflict, it's the only legacy cert with the same name as a new one
I cannot reproduce this on my local version - leads me to think that anyone who would claim the certification since the new site went live would not have this problem... I downloaded all my data from the settings page of the live site - I cannot find the string of the "legacyDataVisId" anywhere in my downloaded data (the string is from ). I can find the strings of all the other certs I have claimed - So the id got changed somewhere along the lines I'm guessing - the downloaded data is hard to decipher, but it looks like there may have been two sections for data vis that got created when you claimed the cert on the old site... I cut some code out but these are surrounded by projects required for the cert


Question: return challenge.id === challengeMeta.id; }); <del> createFiles(savedChallenge?.challengeFiles || challengeFiles || []); </del> <ins> createFiles( mergeChallengeFiles(challengeFiles, savedChallenge?.challengeFiles) ); </ins> initTests(tests); if (showProjectPreview) openModal('projectPreview');

Code in the doesn't seem to be evaluated in production for Cash Register project. (Edit)This appear to be related to the code saving / resetting. In development there isn't such issue. Including building production client and serving it. This is actually the only challenge from the new challenges that is using . Old challenges are working fine when using . Both when names start with ` might be somehow deciding factor, but there isn't any other new challenge to check that. After adding function to user code, error moves normally to the next used in test non-defined variable - and then . Steps to reproduce the behavior: (Be logged in, and have previously saved code for project). to solution. Example: tests. errors. Code present in the should be evaluated after the user code, and before running tests. (Edit) When logged out there's different error, or no errors at all(?!). This might be somehow related to saving / resetting code.
Thanks again for the detailed report, You were dead right about the issue: it's due to the fact that saved challenges don't include head or tail (aka and ) and we were just using them in place of challengeFiles (which does have that stuff).
I have marked this as a showstopper seeing as it is affecting camper's ability to complete a certificate project. It would be nice to get the fix in as soon as possible, so the forum isn't filled with support threads for this.


Question: id: 5a94fe8569fb03452672e464 title: Create Grids within Grids challengeType: 0 <del> videoUrl: 'https://scrimba.com/p/pByETK/c6N78Ap' </del> forumTopicId: 301128 ---

Challenge: Video: The code is supposed to create a two-column layout but there is a typo. Video has: Should be: It would be nice to have the video fixed if possible.
I would like to help but I need some more information like the download link for the video to edit it and overwrite columns on colums.
Is it possible to get this video updated?
this still needs to be fixed, if possible.


Question: # --description-- <del> Notice that your marker doesn't seem to have any color. The background color was actually applied, but since the marker `div` element is empty, it doesn't have any width or height by default. </del> <ins> Notice that your marker doesn't seem to have any color. The background color was actually applied, but since the marker `div` element is empty, it doesn't have any height by default. </ins> In your `.marker` CSS rule, set the `width` property to `200px` and the `height` property to `25px`.

In the "Learn CSS Colors by Building a Set of Colored Markers" project, the step 12 description reads: Notice that your marker doesn't seem to have any color. The background color was actually applied, but since the marker div element is empty, it doesn't have any width or height by default. The div doesn't have any height by default, but as it's a block-level element it spans the entire width of the containing element (body). N/A N/A No response N/A No response
As not a native english speaker, I am confused. Can you provide more details, and an alternative you think will fit the current step?
I agree, it should only be height, not width. As you pointed out the element does have a width.
Suggested change, remove the "width or" from the sentence.
Thanks for opening this issue. This looks something that can be fixed by "first time" code contributors to this repository. Here are the files that you should be looking at to work on a fix: List of files: Change to make: the . Explanation: the div being a block element spans the width of the entire page, as such it is wrong information that should be removed. It is correct to say that it doesn't have an heigth. Please make sure you read , we prioritize contributors following the instructions in our guides. Join us in if you need help contributing, our moderators will guide you through this. Sometimes we may get more than one pull requests. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.
This is my first "real" contribution to open source (let alone to FCC), so although it is a pretty insignificant one, feel free to provide me with any feedback and/or constructive criticism please!


Question: $(document).ready(function() { <ins> if (bonfireName !== undefined) { ga('send', 'event',  'Bonfire', 'load', bonfireName + ':' + Math.floor(Date.now() / 1000)); } </ins> var CSRF_HEADER = 'X-CSRF-Token';

<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --In the challenge CSS Flexbox: Use the flex-wrap Property to Wrap a Row or Column, the value wrap-reverse is defined: wrap-reverse: "wraps items from right-to-left if they are in a row, or bottom-to-top if they are in a column." This definition is not correct. Actually wrap-reverse wrap content changing de cross-axis direction, bottom to top in a row, and left to right in a column. Browser Name: Browser Version: Operating System:
I'd like to take on this issue please
Since the curriculum content is in the repo, I submitted the PR there.
Ok, thanks Simon.


Question: # --hints-- <del> You should have an `img` element with an `src` value of `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`. You may have accidentally deleted it. </del> <ins> You should have an `img` element with a `src` value of `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`. You may have accidentally deleted it. </ins> ```js assert(

I noticed that we are using both "a attribute" and "an attribute" in challenge descriptions. And we even use both in the same challenge (): <img width="596" alt="Screenshot 2024-05-21 at 22 44 29" src=""I think both are acceptable, since the articles depend on how we pronounce "src" ("es-ar-see" vs "source"), but I think we should stick to one for consistency. I'll let native English speakers make the call
I always pronounce it as , so I vote
I'm with Jessica on this one. The second sentence should be changed to .
This issue is open to first-time code contributors to this repository. The files that you should be updating are: Please make sure you read our as well as our , we prioritize contributors following the instructions in our guides. Join us in our or our if you need help contributing; our moderators will guide you through this. Sometimes we may get more than one pull request. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.
Hi everyone. This is a great pick up! I am happy to help out there and will get a initial PR up for review today :)
I have reviewed the changes made in PR, all the related file have been fixed correctly and checked locally.
Hello, This is my first Open source contribution so if you guys can give me feedback on what i did wrong and how i should correct it please guide me. from the seven files mentioned above, I have created pull request for each one which is as below. sorry if i messed up, as it is my first try. I am actively looking for any advice, suggestion, criticism. Thank You.


Question:
"id": "bad87fee1348bd9aedf08802", "title": "Uncomment HTML", "description": [  "Commenting is a way that you can leave comments for other developers within your code without affecting the resulting output that is displayed the the end user.",   "Commenting is a way that you can leave comments for other developers within your code without affecting the resulting output that is displayed the end user.",  "Commenting is also a convenient way to make code inactive without having to delete it entirely.", "Comments in HTML starts with <!--, and ends with a -->", "
",

Typo in the challenge description !
i would like to do it :)
i would like to work on it
so would i.. :-)
Would love to work on this


Question: As a reminder, this project is being built upon the following starter project on Glitch, or cloned from GitHub. A strategy is a way of authenticating a user. You can use a strategy for allowing users to authenticate based on locally saved information (if you have them register first) or from a variety of providers such as Google or GitHub. For this project we will set up a local strategy. To see a list of the 100's of strategies, visit Passports site here. Add passport-local as a dependency and add it to your server as follows: const LocalStrategy = require('passport-local');  Now you will have to tell passport to use an instantiated LocalStartegy object with a few settings defined. Make sure this as well as everything from this point on is encapsulated in the database connection since it relies on it!   Now you will have to tell passport to use an instantiated LocalStrategy object with a few settings defined. Make sure this as well as everything from this point on is encapsulated in the database connection since it relies on it!  ```js passport.use(new LocalStrategy(

<!-- 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: You said 'LocalStartegy' instead of 'LocalStrategy' Add a Link to the page with the problem: ! Tell us about your browser and operating system: Browser Name: Browser Version: Operating System: If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box):
I'll take it up.


Question: --primary-background: var(--gray-00); --highlight-color: var(--blue-dark); --highlight-background: var(--blue-light); <ins> --selection-color: var(--blue-dark-translucent); </ins> --success-color: var(--green-dark); --success-background: var(--green-light); --danger-color: var(--red-dark);

If I try to select text with my mouse so I can copy/paste it or something - the selected text has the same background as the rest of the page. Making it difficult to see what is selected, and frustrating to try and select, well anything. ! This seems to occur across the entire site. Perhaps it was intentional or something, but I don't think it's a good ux. Note: the text does actually get selected, so you can still copy/paste it. Tested on Chrome and Firefox
Good catch. It'll be this PR: which didn't scope the change to challenge descriptions. I'll put together a quick fix. Edit: nevermind, it's just that has to be passed four values, not two. I don't quite understand how this ever worked.


Question: isRootPath } from './utils/redirection'; import { jwtSecret } from '../../../config/secrets'; <ins> import { availableLangs } from '../../../config/i18n/all-langs'; </ins> const passportOptions = { emailOptional: true,

If I am signed in as a user while on and log out, I am redirected to the english home page. redirects to the chinese page.
wrong endpoint in server code? Thats what I would assume, but am not sure how to locate where the correct endpoint would be placed in the code.
Here is the endpoint: and most likely the issue is with the redirect "predictor" utility: However we would want to confirm the cause before we open this up for contributions.
yes, that's the issue. To fix it we can grab the from and combine that with to get the desired redirect.
Should that be done in the getRedirectParams function or should the path be put together from the data set returned by getRedirectParams in
You need to construct the URL from the values you get from the as a consumer of the function and not change its existing behavior. In simple terms the change is required within the endpoint handler.
That makes sense.
I got the codebase installed locally is there a way to run just
Not sure what you mean by running only one file? The API server is an express based application (Loopback 3). You need to start up at least the api-server app. If you want to do that, you should be able to do that by navigating to directory and using the run-script commands in its
I'm trying to figure out what gets passed in pathPrefix, from getRedirectParams, when one signs out from the Spanish page. But when running the site locally, switching to Espanol leads to a "This site can't be reached" error. Just for clarity's sake, I realize now that is not meant to be run alone and I am using the "npm run develop" command to try and recreate this bug locally. Is this a bad approach?
Ah - right. Sorry about sending you on a goose-chase. When you build locally, we do not have a way yet to develop both and at the same time alongside the API app. I am going to untag this from help-wanted and assign this instead. Oliver, you should be able to test / reproduce and recommend a fix on our staging instance - not sure because this may be needing access for "close to prod" type setup.
I was just in the process of going through the steps, when you commented Mrugesh!

I'll leave them here for the curious: Unfortunately testing locally is quite a pain, because we use since is entirely separate from . It's a bit of a slow, memory intensive process, but you can do this: in your .env file Then you can go to


Question: dashedName: relational-databases-and-sqlite --- <ins> # --description-- [Download SQLite](https://www.sqlite.org/download.html) [Download DB Browser for SQLite](https://sqlitebrowser.org/dl/) [SQLite usage](https://www.sqlite.org/famous.html) </ins> # --question-- ## --text--

in the challenge talks about Installing Sqlite. Should we add a link to sqlite download link, here is the file Edit: I would love to add to the next challenge as well Edit: because of first time label, I won't make pr, if you wanna tackle this. please do
I would be fine adding these. We could link right to the download page on each of those sites: &


Question: # --description-- <del> You can have multiple self-closing `meta` elements on a web page. What distinguishes one `meta` element from the other is the attribute. You should add a new meta element for each attribute you want to specify. </del> <ins> You can have multiple self-closing `meta` elements on a web page. Each `meta` element adds information about the page that cannot be expressed by other HTML elements. </ins> Add another self-closing `meta` element within the `head`. Give it a `name` attribute set to `viewport` and a `content` attribute set to `width=device-width, initial-scale=1.0` so your page looks the same on all devices.

The wording on this step is a bit awkward. Based on , the wording isn't quite accurate. This resulted in the camper writing the following code: I'm not sure how to better describe this, tbh. No response System info isn't relevant for a verbiage issue (: No response
Agreed, that is clunky. Just to get the ball rolling.
is anyone working on this, but i can take this up
Hey there, This issue is still under discussion and has not been opened up for contribution yet.
Hi there, I read through the issue related to the wording in step 5 of the 'Learn CSS Colors by Building a Set of Colored Markers' challenge, and I think I might have a suggestion for how to improve the wording. Here's a revised version of the step that I came up with: 'Add a new meta element for each attribute that you want to specify. To specify the viewport attributes, add the following meta element to the head of your HTML document: <meta name='viewport' content='width=device-width, initial-scale=1.0'' I hope this helps clarify the step for other campers. Let me know if you have any feedback or if there's anything else I can do to help with this issue.
What about :
Simpler language is better. Complex sentence structure is harder for learners (and non-learners tbh) to understand. I like wording, as its close to MDN's. We really need to go on a linguistic simplification campaign though the lessons. I just haven't had the time to do so.
I like this wording, it's much clearer than the current instructions. Can I open a PR with these changes?
What did we finalize?
Thanks for opening this issue. This looks like something that can be fixed by "first-time" code contributors to this repository. Here are the files that you should be looking at to work on a fix: List of files: The of the challenge should be updated to the following text: Please make sure you read our , we prioritize contributors following the instructions in our guides. Join us in our or our if you need help contributing; our moderators will guide you through this. Sometimes we may get more than one pull request. We typically accept the most quality contribution followed by the one that is made first. Happy contributing.


Question: <del> --- title: PHP Syntax Overview --- This chapter will give you an idea of very basic syntax of PHP and very important to make your PHP foundation strong. ### Escaping to PHP The PHP parsing engine needs a way to differentiate PHP code from other elements in the page. The mechanism for doing so is known as 'escaping to PHP'. There are four ways to do this − #### Canonical PHP tags The most universally effective PHP tag style is − ``` <?php...?> ``` If you use this style, you can be positive that your tags will always be correctly interpreted. #### Short-open (SGML-style) tags Short or short-open tags look like this − ``` <?...?> ``` Short tags are, as one might expect, the shortest option You must do one of two things to enable PHP to recognize the tags − Choose the --enable-short-tags configuration option when you're building PHP. Set the short_open_tag setting in your php.ini file to on. This option must be disabled to parse XML with PHP because the same syntax is used for XML tags. #### ASP-style tags ASP-style tags mimic the tags used by Active Server Pages to delineate code blocks. ASP-style tags look like this − ``` <%...%> ``` To use ASP-style tags, you will need to set the configuration option in your php.ini file. #### HTML script tags HTML script tags look like this − ``` <script language="PHP">...</script> ``` ### Commenting PHP Code A comment is the portion of a program that exists only for the human reader and stripped out before displaying the programs result. There are two commenting formats in PHP − #### Single-line comments − They are generally used for short explanations or notes relevant to the local code. Here are the examples of single line comments. ``` <? # This is a comment, and # This is the second line of the comment // This is a comment too. Each style comments only print "An example with single line comments"; ?> ``` #### Multi-lines printing − Here are the examples to print multiple lines in a single print statement − ``` <? # First Example print <<<END This uses the "here document" syntax to output multiple lines with $variable interpolation. Note that the here document terminator must appear on a line with just a semicolon no extra whitespace! END; # Second Example print "This spans multiple lines. The newlines will be output as well"; ?> ``` #### Multi-lines comments − They are generally used to provide pseudocode algorithms and more detailed explanations when necessary. The multiline style of commenting is the same as in C. Here are the example of multi lines comments. ``` <? /* This is a comment with multiline Author : Mohammad Mohtashim Purpose: Multiline Comments Demo Subject: PHP */ print "An example with multi line comments"; ?> ``` ### PHP is whitespace insensitive Whitespace is the stuff you type that is typically invisible on the screen, including spaces, tabs, and carriage returns (end-of-line characters). PHP whitespace insensitive means that it almost never matters how many whitespace characters you have in a row.one whitespace character is the same as many such characters. For example, each of the following PHP statements that assigns the sum of 2 + 2 to the variable $four is equivalent − ``` $four = 2 + 2; // single spaces $four <tab>=<tab2<tab>+<tab>2 ; // spaces and tabs $four = 2+ 2; // multiple lines ``` ### PHP is case sensitive Yeah it is true that PHP is a case sensitive language. Try out following example − ``` <html> <body> <?php $capital = 67; print("Variable capital is $capital<br>"); print("Variable CaPiTaL is $CaPiTaL<br>"); ?> </body> </html> ``` This will produce the following result − ``` Variable capital is 67 Variable CaPiTaL is ``` ### Statements are expressions terminated by semicolons A statement in PHP is any expression that is followed by a semicolon (;).Any sequence of valid PHP statements that is enclosed by the PHP tags is a valid PHP program. Here is a typical statement in PHP, which in this case assigns a string of characters to a variable called $greeting − ``` $greeting = "Welcome to PHP!"; ``` ### Expressions are combinations of tokens The smallest building blocks of PHP are the indivisible tokens, such as numbers (3.14159), strings (.two.), variables ($two), constants (TRUE), and the special words that make up the syntax of PHP itself like if, else, while, for and so forth ### Braces make blocks Although statements cannot be combined like expressions, you can always put a sequence of statements anywhere a statement can go by enclosing them in a set of curly braces. Here both statements are equivalent − ``` if (3 == 2 + 1) print("Good - I haven't totally lost my mind.<br>"); if (3 == 2 + 1) { print("Good - I haven't totally"); print("lost my mind.<br>"); } ``` ### Running PHP Script from Command Prompt Yes you can run your PHP script on your command prompt. Assuming you have following content in test.php file ``` <?php echo "Hello PHP!!!!!"; ?> ``` Now run this script as command prompt as follows − ``` $ php test.php ``` It will produce the following result − ``` Hello PHP!!!!! ``` Hope now you have basic knowledge of PHP Syntax. </del>

Describe your problem and how to reproduce it: A PHP syntax overview article is outside of the PHP heading. Add a Link to the page with the problem: Tell us about your browser and operating system: Browser Name: Google Chrome Browser Version: 69.0.3497.100 Operating System: Mac OS High Sierra 10.13.6 If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box): <img width="1248" alt="screen shot 2018-10-12 at 09 14 03" src="https://user-"
Can I take this one? This would be my first ever pull request to a real issue. To fix it I would drag the "PHP Syntax Overview" folder into the "PHP" folder here:


Question:
"description": [ "In Javascript, String values are <dfn>immutable</dfn>, which means that they cannot be altered once created.", "For example, the following code:",  "
var myStr = "Bob";
myStr[0] = "J";
",   "
var myStr = "Bob";
myStr[0] = "J";
",  "cannot change the value of myStr to "Job", because the contents of myStr cannot be altered. Note that this does not mean that myStr cannot be changed, just that the individual characters of a <dfn>string literal</dfn> cannot be changed. The only way to change myStr would be to assign it with a new string, like this:",  "
var myStr = "Bob";
myStr = "Job";
",   "
var myStr = "Bob";
myStr = "Job";
",  "
Instructions
", "Correct the assignment to myStr to achieve the desired effect." ],

and have text in code tags within a blockquote already. The code tagged strings need to be removed. You can see them because they are highlighted again within the code block. Access MultiDimensional Arrays with Indexes: ! Understand String Immutability: !
Agreed, these just just be in the block quote.


Question: "tests": [ "assert($("form").attr("id") === "cat-photo-form", 'Give your form element the id of cat-photo-form.')", "assert($("#cat-photo-form").css("background-color") === "rgb(0, 128, 0)", 'Your form element should have the background-color of green.')",  "assert(editor.match(/<form.*cat-photo-form.*>/gi) && editor.match(/<form.*cat-photo-form.*>/gi).length > 0, 'Make sure your form element has both an id attribute.')",   "assert(editor.match(/<form.*cat-photo-form.*>/gi) && editor.match(/<form.*cat-photo-form.*>/gi).length > 0, 'Make sure your form element has an id attribute.')",  "assert(!editor.match(/<form.*style.*>/gi) && !editor.match(/<form.*class.*>/gi), 'Do not give your form any class or style attributes.')" ], "challengeSeed": [

Challenge has an issue. Please describe how to reproduce it, and include links to screenshots if possible. <img width="328" alt="screenshot 2015-08-17 14 58 06" src="""Make sure your form element has both an id attribute." if you say 'both', it would mean an id attribute AND something else, right?
On it.


Question: import React from 'react'; import { Link as GatsbyLink } from 'gatsby'; import { Grid, Row, Col } from '@freecodecamp/react-bootstrap'; <del> import FontAwesomeIcon from '@fortawesome/react-fontawesome'; import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'; </del> import './footer.css';

Expected behavior Please see attached screenshot for more details. Basically: [x] "Contact email" should be "Email Us" [x] We should get rid of the outbound link icons [ ] The footer should always go below the tallest element. Currently on the Guide, it seems to go under the least tall element. Screenshots <img width="1246" alt="echoandprint_freecodecamp_guide" src="https://user-"
Side note (perhaps a separate issue): the footer on the page is difficult to get to due to the loading of content on a scroll down. So you have to keep scrolling and keep loading content until there's no more to load to reach the footer. I suppose there would be a similar issue on the forum or anywhere else that uses the loading on a scroll.
I'll give it a try.
I have fixed the first two issues but couldn't quite reproduce the third one either in Chrome or Firefox(In Windows 10). cc - !
There is a UX trade off for doing that for implementing the third one. In order for the footer to go under the tallest element, both elements should have the height of 100% (no-scroll). In that case, when user clicks on a side nav that is taller than the content, the page should either go to the top to show the top of the content (loses the location of the scroll), or keep its scroll which means the user will scroll up and down just to change the tabs. here is a demo: ! with no footer, our layout would have behaved similar to the default Gatsby sidebar example. With the footer, the optimal solution would be to add some javascript and have a floating sidebar that stops at the footer. We could also have a fixed sidebar that the footer would overlap at the end of the page. imho, the current setup does the job, but please let me know which solution you would like me to explore.
Hi I agree with I think the key here is to use the site as an end user, and then decide on the tradeoff. I agree that the current sidebar is far better UX for the user, who are more likely browsing through an article and have it in view rather than have them scroll a long way to switch to the next topic of their interest. That will definitely increase a session time and reduce bounce rate.
That is fine. People will scroll.

I think you all are dramatically overestimating the inconvenience of scrolling. On mobile, this will all be a single column layout anyway. This is what people thought was the optimal solution back in the 1990s. In practice, it's confusing to users. Users would much rather scroll up and down a page then have to move their mouse around to different "frames" and scroll up and down within those in a more confined space. Just look at this page here on GitHub. The footer is always at the bottom of the tallest column, which in this case is the middle one. If I want to see who this issue is assigned to, yes - I have to scroll back up to the top of the page. That's no big deal - it takes less than a second. We should use a similar approach with footers everywhere on freeCodeCamp. Separate horizontal scrolling portions are bad enough, and I'd like to move away from them - let alone separate vertical portions. Here's an example of how having separate scrolling areas is hurting usability on learn: <img width="1415" alt="learnbasichtmlandhtml5fillintheblankwithplaceholdertextfreecodecamporg" src="https://user-"A new user might not even realize that there are buttons and tests underneath the "run test" button. The footer should always be at the bottom of whichever column is tallest, and we should not have independently scrolling columns. At some point in the past year or two, the independently scrolling columns were introduced. could you start working on a version that puts the footer at the bottom of the tallest column?
I strongly recommend testing the app as user would to derive the best UX for our app's use case. For the Guide, I think the tallest element principle does not work in practice, you can test that locally yourself, it's just weird to scroll through whitespace vs content. People will scroll through content, not whitespace? For Learn I had given my feedback in a comment here: But, we quickly realized that the tallest element won't work either. Here is what we should do though is to use the buttons as a fixed component on learn. This gives us the ability to scroll the "content" as much as we want, while keeping the most used component buttons in our case in view. !

Also, I would like to bring light to the fact that several feedback (fairly frustrated) threads that we have had here on GitHub and forum is the ability to use the challenge map about scrolling. It works when you are casually browsing, not when you are looking for something specific. But that's a different problem unrelated to this thread. Anyways, let's start working on a version that does put the footer at the bottom of the tallest element and do a A/B test.
I will make a MVP and have you test it ASAP. Here is how Khan academy does it when the scroll meets the footer. Notice the shadow indicating that side nav is continuing and scrollable <img width="504" alt="screen shot 2019-02-12 at 9 29 49 pm" src="https://user-".
Please let me know if you wanna move forward with this design, and if you want the user to go to the top of the page after clicking the side nav or not so I could adjust it accordingly.
Please take a look at this document: Also consider this: very few people are actively looking for the footer. And if they are, they're just going to swipe down really fast and get there immediately, regardless of how tall the page is. The main purpose of the footer is SEO and for the 0.001% of people who are actively looking for it. (how many times a day do you find yourself trying to scroll down to content in a footer?) The Guide's sidebar is only 109 entries tall. It's not going to be that much space. If they have one of the bigger categories expanded, yes, it could be more. But I don't think the footer is important enough to warp the experience of the guide.
A good example of how to handle a documentation page with expandable side menu items, and a footer, without extra scrolling is the MDN: When you expand the menu items on the left, the footer just gets pushed further down the page.
with these changes, this issue will back Or am I missing something?
so I think wants the page scroll to go to zero only when a node with no children is clicked on the side nav. I cannot think of a way that I could implemented it without recording and resetting the scroll with JS, so if anything comes to your mind, let me know.
Nodes with children also have articles.

very good point, so we would be reverting to the bug, then. if the height of both elements are set to 100% our footer would be pushed down when an element is expanded; however, in the mozilla doc, Nodes with children do not have articles. So users can click on an end node on the side nav and then it page goes to the top. in our case, if a user wants to visit for example . She would be scrolling the whole side nav 3 times. If we really need to go in that direction, the other option would be not take the users to the top of the page regardless of where they click on the nav. but when they reach their destination in the sidenav tree, they will have to scroll up to see the article's beginning.
Hi IMHO, and all honesty I really do not care about the footer. Meaning we are on the same page about its priority. The idea is the best usability of the site itself. I am not advocating that we should not make it so that people do not have to scroll. All I am interested in is making the UX intuitive and not painful from a user's viewpoint. I completely agree on your well researched thoughts about scrolling. But I keep re-iterating to test the site ourselves in A/B strategy and see what works best for us. In my tests, I found it weird and awkward to scroll when I am working through challenges, or looking through guide articles (not casually browsing like on a news site). So, from my tests: On the guide, the footer should be below the content element (the right guide article itself). The content element will expand in height depending on its content. This will keep the footer out of the view at all times. That is The footer can be hidden out of view under the viewport. Your MDN example, does something same. At all times, the content block is on the top of the footer. On the learn, I think we should get rid of the internal scrolls. But this also means, we should keep three things always in view: editor (labeled 2 on my screenshot) buttons preview panel (labeled 4 on my screenshot) These are the most interacted elements on the learn app. Only the instructions (without the buttons, will scroll) The footer can be hidden out of view under the viewport.

Maybe for the challenges and guide page we could make a smaller footer similar to the one github uses.
!
Re-opening. GitHub closed it automatically. This issue will be taken care of in repeated iterations.
I believe the decision is to make the sidebar more concise so there would not be a need to scroll. Although displaying the sibling nav items were discussed, I think it would be best to move forward with something similar to the following convention where only children and parent nodes are in the sidebar. !
Yes, let's get a variation that you propose in, and test it out.
I have a couple of suggestions on the footer: I feel the links are too cramped and need a little more padding between them Headings can be simplified There should be substantial space between the block of text on the left and the links At the end, it could look somewhat like this: !
I really like your design, it definitely looks better than the current one. Here are a couple of considerations. The logo looks great, but it makes the footer area taller. As a general rule we would like to save as much screen real state as possible. To be accessible we need a way other than color to establish visual hierarchy between headings and footer items. I encourage you to take screenshot of both the current version and your design so we could compare their sizes and their white space allocation better. After that let's have a pr and merge the changes.
Also I don't think you're allowed to change the colour of logo according to https://design-style-
let us address side-nav related suggestions and improvement in the above-referenced issue so it does not get confused with the footer.
Here are the screenshots for screenshots for comparison. ! ! !
would you be interested in making the footer titles more concise as suggested?
I always have this message always poping up when i run my code "Your Footer do not all have a white color" i have done all i could but cannot detect any fault in my code. this stopped my html from running further. I gave an inline style with white as color yet the problem continued. I just don't know what to do again


Question: "slasher([1, 2, 3], 2);" ], "tests": [  "assert.deepEqual(slasher([1, 2, 3], 2), [3], 'message: slasher([1, 2, 3], 2, [3]) should return [3].');",   "assert.deepEqual(slasher([1, 2, 3], 2), [3], 'message: slasher([1, 2, 3], 2) should return [3].');",  "assert.deepEqual(slasher([1, 2, 3], 0), [1, 2, 3], 'message: slasher([1, 2, 3], 0) should return [1, 2, 3].');",  "assert.deepEqual(slasher([1, 2, 3], 9), [], 'message: slasher([1, 2, 3], 9) should return [].');"   "assert.deepEqual(slasher([1, 2, 3], 9), [], 'message: slasher([1, 2, 3], 9) should return [].');", "assert.deepEqual(slasher([1, 2, 3], 4), [], 'message: slasher([1, 2, 3], 4) should return [].');"  ], "MDNlinks": [ "Array.slice()",

I think this is a Typo the that at first lead me to confusion in the Bonfire: Slasher Flick the Asserts to complete the Bonfire said slasher([1, 2, 3], 2, [3]) should return [3]. slasher([1, 2, 3], 0) should return [1, 2, 3]. slasher([1, 2, 3], 9) should return []. and I think the first one should say slasher([1, 2, 3], 2 ) should return [3]
thanks for posting this issue! Confirmed! Also this bonfire accepts this solution: which is incorrect. I think tests should check if and if so the returning value should be .


Question: editor.on('keyup', function() { clearTimeout(codeStorage.updateTimeoutId); codeStorage.updateTimeoutId = setTimeout( <del> codeStorage.updateStorage, </del> <ins> codeStorage.updateStorage.bind(codeStorage), </ins> codeStorage.updateWait ); });

Challenge has an issue. Please describe how to reproduce it, and include links to screenshots if possible. The code editor does not update with the code changes. The editor retains the code I originally entered, which is not correct. I corrected my code, and passed the challenge. It gave me the success message, and incremented my task counter, but when I return to this page, it still has my original, incorrect code.
I submitted a bug When i hit run code it does not save my code. () for the chunky monkey bonfire and was referenced to this bug and it is still not fixed. so I am reopening the issue here.
It's not saving this one either:
This appears to be happening on every exercise I complete.