jiebi/CodeConvo huggingface dataset:
Code change:
<section> <h2>Cat Form</h2> <form action="https://freecatphotoapp.com/submit-cat-photo"> <del> <fieldset> </del> --fcc-editable-region-- <ins> <fieldset> </ins> <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label> <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label> <del> --fcc-editable-region-- </del> </fieldset> <ins> --fcc-editable-region-- </ins> <input type="text" name="catphotourl" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form>

Related discussion:
text: 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.
Code change:
<section> <h2>Cat Form</h2> <form action="https://freecatphotoapp.com/submit-cat-photo"> <del> <fieldset> </del> --fcc-editable-region-- <ins> <fieldset> </ins> <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label> <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label> <del> --fcc-editable-region-- </del> </fieldset> <ins> --fcc-editable-region-- </ins> <input type="text" name="catphotourl" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form>

Related discussion:
text: 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.
Code change:
// eslint-disable-next-line max-len it('Worker executor should successfully execute 3 tasks and use 1 worker', async () => { mockWorker(); <del> const testWorker = createWorker('test', { concurrency: 1 }); </del> <ins> const testWorker = createWorker('test', { maxWorkers: 1 }); </ins> const task1 = testWorker.execute('test1'); const task2 = testWorker.execute('test2');

Related discussion:
text: 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).
Code change:
// eslint-disable-next-line max-len it('Worker executor should successfully execute 3 tasks and use 1 worker', async () => { mockWorker(); <del> const testWorker = createWorker('test', { concurrency: 1 }); </del> <ins> const testWorker = createWorker('test', { maxWorkers: 1 }); </ins> const task1 = testWorker.execute('test1'); const task2 = testWorker.execute('test2');

Related discussion:
text: 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!
Code change:
import { bindActionCreators } from 'redux'; import EditorTabs from './EditorTabs'; import { showUpcomingChanges } from '../../../../../config/env.json'; <ins> import i18next from 'i18next'; </ins> const mapStateToProps = createStructuredSelector({ currentTab: currentTabSelector

Related discussion:
text: 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.
Code change:
"workshop-blog-page": { "title": "Build a Cat Blog Page", "intro": [ <del> "In this workshop, you will learn how to build an HTML only blog page using semantic elements including the main, nav, article and footer elements." </del> <ins> "In this workshop, you will learn how to build an HTML only blog page using semantic elements including the <code>main</code>, <code>nav</code>, <code>article</code> and <code>footer</code> elements." </ins> ] }, "szcd": { "title": "13", "intro": [] },

Related discussion:
text: 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.
Code change:
<div> <div class="spacer" <del> style="padding: 15px 0px; height: 1px;" </del> <ins> style="padding: 15px 0px;" </ins> /> <div class="container" > <div class="spacer" <del> style="padding: 15px 0px; height: 1px;" </del> <ins> style="padding: 15px 0px;" </ins> /> <div> <div

Related discussion:
text: 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.
Code change:
<div> <div class="spacer" <del> style="padding: 15px 0px; height: 1px;" </del> <ins> style="padding: 15px 0px;" </ins> /> <div class="container" > <div class="spacer" <del> style="padding: 15px 0px; height: 1px;" </del> <ins> style="padding: 15px 0px;" </ins> /> <div> <div

Related discussion:
text: 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
Code change:
margin: 0; padding: 0; } .certification-namespace h1 { margin: 12px 0; } .certification-namespace.container { max-width: 1500px; width: 100%;

Related discussion:
text: Is your feature request related to a problem? Please describe. Currently the certificates lack any white space along the top border, making them difficult to screenshot and/or print: ! We should add some white space to the top of the page so the certificate is centered.
Code change:
section: PropTypes.string }; <del> function ChallengeDescription({ description, instructions, section }) { return ( <div className={`challenge-instructions ${section}`}> <div dangerouslySetInnerHTML={{ __html: description }} /> {instructions && ( <Fragment> <hr /> <div dangerouslySetInnerHTML={{ __html: instructions }} /> </Fragment> )} <hr /> </div> ); </del> <ins> class ChallengeDescription extends Component { componentDidMount() { // Just in case 'current' has not been created, though it should have been. if (this.instructionsRef.current) { Prism.highlightAllUnder(this.instructionsRef.current); } } constructor(props) { super(props); this.instructionsRef = React.createRef(); } render() { const { description, instructions, section } = this.props; return ( <div className={`challenge-instructions ${section}`} ref={this.instructionsRef} > <div dangerouslySetInnerHTML={{ __html: description }} /> {instructions && ( <Fragment> <hr /> <div dangerouslySetInnerHTML={{ __html: instructions }} /> </Fragment> )} <hr /> </div> ); } </ins> } ChallengeDescription.displayName = 'ChallengeDescription';

Related discussion:
text: 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.
Code change:
# --description-- <del> Add an `else` block to handle the current song's position in the playlist. </del> <ins> Add an `else` block to handle the song's current playback time. This allows you to resume the current song at the point where it was paused. </ins> Within the `else` block, set the `currentTime` property of the `audio` object to the value stored in `userData?.songCurrentTime`.

Related discussion:
text: 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.
Code change:
# --description-- <del> Add an `else` block to handle the current song's position in the playlist. </del> <ins> Add an `else` block to handle the song's current playback time. This allows you to resume the current song at the point where it was paused. </ins> Within the `else` block, set the `currentTime` property of the `audio` object to the value stored in `userData?.songCurrentTime`.

Related discussion:
text: 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.
Code change:
# --description-- <del> Set `monsterHealth` to `monsterHealth` minus the power of the player's current weapon. Remember you have the `currentWeapon` variable and the `power` property. </del> <ins> Set `monsterHealth` to `monsterHealth` minus the power of the player's current weapon. Remember that you can access the power of the player's current weapon using `weapons[currentWeapon].power`. </ins> # --hints--

Related discussion:
text: 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
Code change:
const propTypes = { canFocusEditor: PropTypes.bool, children: PropTypes.any, <ins> editorRef: PropTypes.object, </ins> executeChallenge: PropTypes.func, innerRef: PropTypes.any, introPath: PropTypes.string,

Related discussion:
text: Is your feature request related to a problem? Please describe. It currently can take a several key presses to navigate to the editor if it does not have focus. Describe the solution you'd like It should be possible to focus on the editor with a hotkey, for example 'e'. The issue where this was mostly discussed will be closed soon, but some thoughts about implementing this appeared there:
Code change:
# --description-- <ins> In programming, it is standard practice to prefix a variable with `is` or `has` to indicate that the variable is a boolean. ```js let isRunning = true; let hasCompleted = false; ``` </ins> Declare an `isError` variable and set it to `false`, but use `let` so you can reassign it later. # --hints--

Related discussion:
text: 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