jiebi/CodeConvo huggingface dataset:
In RWB, the placement of the instructions interrupts the code and makes indentation unclear, especially for a beginner that may not know what to look for yet. I noticed several instances where putting longer, uninterrupted part of the code in the highlighted editor might help with clarity. <h2Examples</h2<a href=""Step 21</a: change the error message or expand the highlighted code. (Error message when h3 is in the wrong location: "There should be an h3 element right above the second section element's closing tag.") <a href=""Step 23</a: include in highlighted editor to match the instructions ("A figure caption (figcaption) element is used to add a caption to describe the image contained withing the figure element.") and to show the placement of within . <a href=""Step 50</a: include in highlighted editor to match the instructions ("The legend element acts as a caption for the content in the fieldset element.") and to show the placement of within . <h2Proposed solutions</h2- Expand the code on case-per-case basis. Permanently move the instructions box on top of the code editor. (I think that would make everything clearer and more accessible with well defined sections on the page, but I imagine it would be harder to implement now.)
I don't believe we would go this route, as the instructions UI was specifically designed to allow us to highlight the section of code a camper should be editing. I do agree some of these regions could be tweaked a bit
Thank you for reading through it! I will admit I that secondary suggestion because of a personal issue as well, as I find the page a bit overwhelming and every time I click on the next step, it takes me a while to find and re-focus on the editor. I think there's just a lot going on visually, but I'm not a UI/UX designer so I don't have specific suggestions except for the fixed placement.
I'm fine with changing the three lessons mentioned here, but we could maybe use a discussion on how those regions should be. There's probably going to be many steps where the editable region could be bigger or smaller or different. Maybe we need some hard rules on how to apply them. Something like - for HTML steps, include the parent element in the region. For CSS steps, include the whole selector.
There may be instances where rules like that don't work out so well. Like for the first steps of the Cat Photo project, we may want to be more specific about where to add code - and on later steps or projects, more vague. So I don't know.
I did bring this up, but we were on the fence with:
Yeah it seems like something that's more of a case-by-case basis than to have hard and fast rules for. My proposed "general" approach would be to encapsulate anything the instructions mention. So if the instructions say "write a h2 below your h1", the h1 should be within the editable region.
To try and get this issue resolved, I vote for these changes: step 21: change the hint to "There should be an img element right after the closing tag." step 23: use op's suggestion step 50: use op's suggestion
Thank you for reporting this issue. An easy fix would be to scroll the editor so the instructions are always almost at the top of the "page". That way the eyes know where to go on each challenge. (right now it scrolls to the center) I am interested in knowing more about this: " it takes me a while to find and re-focus on the editor." Are you having difficulty locating the instructions? do also look around for the tests and the submit button? More context is appreciated. We ultimately need to usability test this with people who have not seen the curriculum.
Hello, sorry for the late reply. After seeing this notification, I opened the curriculum on a random step to see if I could provide you with more information. I mostly forgot how the page was structured and my eyes just ran across the page in no specific order. "Check your code" was the first text I read, as it draws the most attention, and then "". I believe that would be very helpful! (I think it would also be nice if the navigation breadcrumbs were more subtle, and if the buttons like "", "" and "preview" looked more like toggle buttons – now they remind me of tabs but disconnected from their sections, and they also draw more attention than is perhaps needed?) Thank you for checking in on this!
Thank you for your feedback.
Describe the bug Sass pages with invalid syntax occasionally timeout To Reproduce Steps to reproduce the behavior: to in in the console (sometimes) Expected behavior The following should appear in the console: Since this is intermittent, here's a gif to demonstrate: ! Additional Context When the error appears it does so very quickly, so it is unlikely that this is due to a genuine timeout.
Hey Oliver, When I clicked on the link, I reset the code, and completed the challenge as it should be completed. I came across a error, and was unable to run the tests. However, after resetting the code, refreshing the page, and pasting in the code you provided (missing ), the error you mention appeared, but does not disappear. So, I suspect it has to do with the page first load, because I can get the error only if I: 1) reset the code 2) Duplicate the tab 3) Input the incorrect code (missing ) !
I tried method but that didn't produce the bug. I am able to reliably reproduce the bug on Chromium & Firefox with the following steps: the page (new tab & refresh can both produce bug). delete & re-add the character from line 9, fast enough that the new state does not display in the console. step 2 on deleting the . If done correctly the message will display instead of an error, even though the console input is incorrect. approximately 3-5 seconds for the timeout message to appear. Note: it can also be reproduced where by in step 2 you end on re-adding the but it's harder to tell if the bug has happened. It must have something to do with the console state change and the output error check conflicting.
I worked on this issue on my old computer that is very slow and on my main PC (with a dual boot). On my old computer I have the same result as regurlaly timeouts. On the new one to have this issue I have to paste 3 times the piece of code to reproduce it. But everytimes, this is a real timeout (5ms, I put 'new Date()' on the code).
We can upgrade the source code one "execute-challenge-" with this kind of stuff to have a best message, but still the problem : <prelet errMsg = 'error'; if (err === 'timeout') { // eslint-disable-next-line no-ex-assign errMsg = ; } else if (Array.isArray(err) && err.length0 && err[0] === 'timeout') { // timeout: 5ms errMsg = ; } else { errMsg = err; } (errMsg); yield put(updateConsole(escape(errMsg))); </preso the result will be "Server response timeout"
While this is old, it's still reproducible, unfortunately. A PR to improve the warning would be welcome.
I’m currently taking a look into a possible solution on this!
Describe the bug When you enter a challenge using a mobile device, the tabs below the main header are displayed with untranslated text To Reproduce Steps to reproduce the behavior (mobile device): to untranslated tabs below the main header Expected behavior Tabs text should be translated. Screenshots Spanish site ! Chinese site ! Desktop (please complete the following information): OS: [Windows 10] Browser: [chrome] Version: [88] Additional context Those strings are not available yet on the Crowdin platform.
Keywords in the following sentence should be wrapped within . Update the file with this change:
This issue is open to first-time code contributors to this repository. The file that you should be updating is linked in the original post. We typically do not assign issues. Instead, we accept the most quality contribution followed by the one that is made first. 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. Happy contributing.
I can work on this.
Are you still working on this?
I submitted a pull request () that is waiting to be reviewed.
I would like to work on this.
I can work on this.
We have instances which is used to provide spacing for both side of the component to wrap it up in specific space Example: We can make the Spacer component smarter, and allow it to accept children, so the code be like. But in doing so, we need to: change the current values and how the padding is calculated, the old layout shouldn't change with the new spacers. change which padding has the new value, I think paddingBlock, which is paddingTop and paddingBottom, is the new padding property . I am requesting this because this will make live simpler, and we have to worry about less elements while controling the layout, and if we have specific cases, we can still use
There is an abstraction with , we need address, it's better if we can specify the direction of the padding. but this can be sorted in another issue, for now to solve this issue please allow to have children prop inside of it, but the current styles of the curriculum shouldn't change. If you would like to fix this issue, please make sure you read , we prioritize contributors following the instructions in our guides. Join us in or if you need help contributing, our prolific contributors will guide you through this.
Hey I have few questions while looking into this issue are few files where we have used Spacer, so may I just change wrap the content where ever needed or it would be handled in new issue? (I guess it must be done in other issue, as it would be easy to maintain) have implemented the children props, so may I raise a PR? Will break this issue in 2 other issues as well. 1 for wrapping the places it has been used, and 2nd for specifying the direction. I was wrapping and trying it out, I found out that Spacer has been used at every 2nd-3rd line of code, so do we need such a wrapper which would give spacing to all components present inside it or only to the parent component? EG: If we have 2 divs wrapped inside Spacer, then does both div have the spacing around them or only the outmost div.
sorry for the delay, it was difficult to understand what you mean without looking at an example of code, so to answer you: yes the direction will be in a second issue, but the spacing and values should still be in this issue, so the pages won't look different Of course, please raise a PR after reading the guideline, nicely done . The Spacer shouldn't affect the children inside of it, think of it as creating a container with margin-block to space the area of the children inside of it from other areas
I guess we could close this issue
will be closed when the height is removed in the other PR
Related to . Once that's done, the code blocks will be written in blocks of  into ! while the same code on the guide looks like ! I think this change would make the code blocks easier to read, make the guide and challenges feel more like parts of a unified whole and fit better with the code editor aesthetic discussed in the . I'd be happy to work on this, if this is useful feature What do you think?
You should look into for this sort of thing. Goodluck. this is something we would probably be needing and using across Guide and Learn. So, I'll let you chime in and guide on this.
please clarify the instructions for step 39 of JS Beta Build a Music Player Currently they consist of 2 sentences: "Add an else block to handle the current song’s position in the playlist. Within the else block, set the currentTime property of the audio object to the value stored in userData?.songCurrentTime." The first sentence doesn't seem to relate to the second. It is not clear how 'the current song's position in the playlist" is affected by the actions requested of setting the audio object's currentTime? This makes me think that there's a mistake in the first sentence (or maybe I've misunderstood what it is trying to say so it needs more clarification) N/A N/A No response N/A No response
I don't think it has anything to do with the playlist order. The only thing is used for is pause/play (it gets reset everywhere else). Maybe it can just be:
My thoughts was that the else block was designed to continue playing the song at the place you stopped it. The current song has been chosen and it's same id of the song. In the block, we're setting the time to zero. In the else block, we're setting it at the old time.
FYI: I attempted to test pausing and restarting the song but it always restarted from the beginning.
In what step did you test it? If you go to the last step, the play/pause should work as intended (or to whatever step has it implemented). Pausing saves the audio element's current time to , and playing restores it back to the element's current time when is available.
I see, I thought I would be able to pause and play something else then come back to the original selection and it would start from where I stopped (but I don't think the code was created for that).
Nah. It only resumes and plays back for the current song. Once you switch songs, it forgets where you left off on the old one.
I would be fine adding something like "This allows you to resume the current song at the point where it was paused."
This looks like something that can be fixed by "first time" code contributors to this repository. Here is the file that you should be looking at to work on a fix: Change: To: Please make sure you read , we prioritize contributors following the instructions in our guides.
The instruction are not clear, right now it says Edit: This is actually step 120 in the main branch Set monsterHealth to monsterHealth minus the power of the player's current weapon. Remember you have the currentWeapon which is not initialized variable and the power property on weapons array. No response Device: Laptop OS: macOS Browser: Chrome I think it should be more detail about what and where is currentWeapon, power property and how to access it like in previous.
It looks like currentWeapon is initalized with the value of 0 here Then it is updated over time throughout the project. I think for that second sentence it should be clear about syntax on how to access those values since beginners are still struggling with that. Being more explicitly will help with confusion on the forum posts. Let's go with this change.
This has been opened 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 Happy coding
Throughout the curriculum, we often have campers name variables that represent booleans with the prefix of or which follow standard convention. But we never really explain that to them. I think that step 17 would be a good place do that. js let isRunning = true; let hasCompleted = false; ` 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
This has been opened 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 Happy coding
<!-- 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 below, the alt text for the diagram is set to "a diagram of non-overlapping concentric circles". But if my understanding is correct, they are not "concentric circles" (circles which share the same center). <!-- Add a link to the coding challenge with the problem. --Coding Interview Prep Project Euler Problem 199: Iterative Circle Packing <!-- Add a clear and concise description of what you expected to happen. --The alt text should be changed to "a diagram of non-overlapping circles" or something. (I'm not a native English speaker, so please fix it if there is a better description.) <!-- If applicable, add screenshots to help explain your problem. you can drag and drop, png, jpg, gif, etc. in this box. --! <!-- Please complete the following information. --- Device: Laptop OS: Windows 10 Browser: chrome Version: 96.0.4664.45 <!-- Add any other context about the problem here. --Originally reported in a comment on Crowdin duing translation.
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 or 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.
I would like to work on this.
Hey Issues are typically not assigned to a specific person, other than long-time contributors. You can read more about this at Issues labelled with or are open for contributions for all. Please make sure you read . Join us in or if you need help contributing, our moderators will guide you through this.
sorry about that, as this was my first time in freeCodeCamp, I'll make sure to read the contribution guidelines
<!-- 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: using the code in this file: the challenge is passable by uncommenting lines 56-59 if (curr === null) { (curr, "curr") return null } The wording of the test is "Trying to remove an element that does not exist should return null." yet the assertions only test for removing a node that does not exist in an empty tree. What about removing nodes that do not exist in a tree that has nodes? ` Add a Link to the page with the problem: My pull request: 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):
To summarize the issue: Test checks only if trying to remove non-existing element from empty tree will return null. It doesn't check if the same happens for removing non-existing element from non-empty tree. This can lead to implementation, which doesn't handle the second case at all (and even as in example above can end up with error), and still pass challenge.
This step comes up a lot on the forum and I think it is because we have never really explained what method chaining is or showed an example. Let's update the description to include an example so they know what to do. We should also explain why the join method is needed here so they better understand what is going on. js const exampleArr = ["This", "is", "a", "sentence"]; const sentence = (" "); // Separator takes a space character (sentence); // Output: "This is a sentence" js ().join(); ` 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
This has been opened 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 Happy coding
There is a bug in the challenge learn-basic-debugging-by-building-a-random-background-color-changer/step-8 | when entering it passes the test; ! Device: [MacBook Pro 10.15.7] OS: [ iOS Catalina] Browser: [Brave, Chrome] Version: [...] passes test, when it shouldn't`
Very interesting and confusing finding! This is the passing test: Here's part of the explanation why it passes: Setting to also would pass.
No need to use here since the array is not re-assigned in later steps. We used for other arrays in this project that aren't reassigned. No response All No response
Hello, I fixed this by doing the following: 1) went to 2) found the ID of step-162 () 3) went to the repositories code and searched for the markdown file through ID. 4) the markdown file 5) Updated the markdown file to use 'const' instead of 'let' ! After this commit is approved, this should be able to be closed.
All of the seed code for subsequent challenges would also be changed.
I am not sure what you mean by this. Is there anything I can do to learn this? Are you referring to all references of 'let' initialization to be changed to 'const' in future steps?
Not quite - the answer to this step becomes part of the starting code for all future steps. If we change the instructions to use here, then then starting code on all future steps needs to be swapped to reflect that.
Hi, I raised a PR to fix this
<!-- 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: This challenge has an example of sorting like this: ` This example uses a bad compare function. In recent changes to Chrome the following example no longer properly sorts the array: The compare function needs to return a number to be able to sort an array properly. This can be fixed by changing the compare function to return a number: Add a Link to the page with the problem: Tell us about your browser and operating system: Browser Name: Chrome Browser Version: 70 Operating System: Windows 10
The above return statement only returns 1 or -1. To preserve the original order for elements which have the same value, you need to test for the condition where they are equal. For example, to preserve an elements original order when equal, you would write: While in this particular example, you may not be able to see the difference, I will show a different example below, where the difference can be seen. Let's say you have the following array of objects: The 2nd and fifth elements have the same letter, but they are in different positions. Let's say you want to sort the objects in alphabetical order and preserve the original sort order of the elements with the same letter (in this case those with letter 'b'). This means, after the sort, letters should look like: If you just create the following sort function without specifying a return value of 0 when the letters are equal, it would not sort correctly in the new version of Chrome: The above produces: instead of the correct version: To preserve the original sort order for objects with the same letter, you must use the following sort function: I think the example should reflect the better practice of specifying a return value of 0 for elements which are equal in value. This matches the actual requirements of the compare function of returning a value of 0, -1, or 1, so I believe the example should be written like:
I am interested working on this issue
Although the example used in the original text doesn't require ordering I agree adding would be fine. As much as I like ternaries, I'm not in favor of nested ternaries. As a general rule they . If possible I'd keep the text challenge clean and readable.