jiebi/CodeConvo huggingface dataset:
Change:
Describe the bug When you reload a page two style issues appear. The placeholder text moves slightly once the page has fully loaded. The search hits are briefly bold To Reproduce Steps to reproduce the behavior: to (or any page with search) the placeholder text move on the search bar anything the result appear briefly as bold, then change to a normal weight Expected behavior The page should start with the styles it ends up getting. Screenshots !
Hey, I wanna help with it. Where can I find the code for it? (First time contributing)
I'm not 100% sure where the problem is, but the , and components are all involved to some degree. Somehow the are not getting the right classes when first rendered I think. I'm planning to take a closer look myself, tomorrow, but you're welcome to submit a PR/share any insight. As you wish!
It turns out it wasn't anything to do with those components. The problem is that the font doesn't get loaded until it's needed - in this case when the search results appear. That causes a brief flash of and that's the cause of the problem. I'm going to look into pre-loading the fonts and clear this up.

Discussion:
import Flash from '../Flash'; import Header from '../Header'; import Footer from '../Footer'; <ins> // preload common fonts import latoLightURL from '../../../static/fonts/lato/Lato-Light.woff'; import latoRegularURL from '../../../static/fonts/lato/Lato-Regular.woff'; import latoBoldURL from '../../../static/fonts/lato/Lato-Bold.woff'; // eslint-disable-next-line max-len import robotoRegularURL from '../../../static/fonts/roboto-mono/RobotoMono-Regular.woff'; // eslint-disable-next-line max-len import robotoBoldURL from '../../../static/fonts/roboto-mono/RobotoMono-Bold.woff'; // eslint-disable-next-line max-len import robotoItalicURL from '../../../static/fonts/roboto-mono/RobotoMono-Italic.woff'; </ins> import './fonts.css'; import './global.css';

{ name: 'keywords', content: metaKeywords.join(', ') } ]} > <ins> <link as='font' crossOrigin='anonymous' href={latoRegularURL} rel='preload' type='font/woff' /> <link as='font' crossOrigin='anonymous' href={latoLightURL} rel='preload' type='font/woff' /> <link as='font' crossOrigin='anonymous' href={latoBoldURL} rel='preload' type='font/woff' /> <link as='font' crossOrigin='anonymous' href={robotoRegularURL} rel='preload' type='font/woff' /> <link as='font' crossOrigin='anonymous' href={robotoBoldURL} rel='preload' type='font/woff' /> <link as='font' crossOrigin='anonymous' href={robotoItalicURL} rel='preload' type='font/woff' /> </ins> <style>{fontawesome.dom.css()}</style> </Helmet> <WithInstantSearch>
Change:
We should make this more grammatically correct by adding a comma and space before the name, and a period after it. For example: Welcome back, Quincy Larson. <img width="1405" alt="Learn_freeCodeCamp_org" src="https://user-"

Discussion:
<Col sm={10} smOffset={1} xs={12}> <Spacer /> <h1 className='text-center big-heading'> <del> {name ? 'Welcome back ' + name : 'Welcome to freeCodeCamp.org'} </del> <ins> {name ? 'Welcome back, ' + name + '.' : 'Welcome to freeCodeCamp.org'} </ins> </h1> </Col> </Row>
Change:
On the home page, it lists the section as a certification.... ! Maybe remove that since there's no cert for it?
Yes, you are correct. I will defer to for the correct categorization for this.
We could change the font size of this. Then it would be visually distinct from the other items in this list.
We can indent the list belonging to same category. And make change in font style Like this way:- Certifications: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"Responsive Web Design</a&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"JavaScript Algorithms and Data Structures</a&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"Front End Libraries</a&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"Data Visualization</a&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"APIs and Microservices</a&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"Information Security and Quality Assurance</a<a href="#"Coding Interview Prep</a
I'm not sure I like either of these solutions - it seems like it might just make a user ask themselves something like: "what's with that last one?" - And not be quite clear enough that it is not a cert. What about something a little more specific... Certifications: &nbsp;&nbsp;<a href="#"Responsive Web Design</a&nbsp;&nbsp;<a href="#"JavaScript Algorithms and Data Structures</a&nbsp;&nbsp;<a href="#"Front End Libraries</a&nbsp;&nbsp;<a href="#"Data Visualization</a&nbsp;&nbsp;<a href="#"APIs and Microservices</a&nbsp;&nbsp;<a href="#"Information Security and Quality Assurance</aAdditional Challenges: &nbsp;&nbsp;<a href="#"Coding Interview Prep</a

Discussion:
export const Landing = ({ edges }) => { const superBlocks = uniq(edges.map(element => element.node.superBlock)); <ins> const interviewPrep = superBlocks.splice(6, 1); </ins> return ( <Fragment> <Helmet>

</li> ))} </ul> <ins> <Spacer /> <h2 className='medium-heading'>Additional Learning:</h2> <ul> <li> <Link state={{ superBlock: interviewPrep }} to={`/learn`}> <h2 className='medium-heading'>{interviewPrep}</h2> </Link> </li> </ul> </ins> </Col> </Row> <Spacer />
Change:
Describe the bug When you left click while on the page the random quote gets replaced with a new one. To Reproduce Steps to reproduce the behavior: to on anything that doesn't take you to a new page the random quote get replaced Expected behavior A random quote should appear each time you visit learn, but it should not change unless you reload. Screenshots ! Additional Context This only appears once the site has been built, doesn't show the error. It is not happening in production, so presumably was introduced since
I see this on the production site as well.

Discussion:
import './welcome.css'; <ins> // created outside the function, so that the quotes don't change unless the // page is reloaded. const { quote, author } = randomQuote(); </ins> function Welcome({ name }) { <del> const { quote, author } = randomQuote(); </del> return ( <Fragment> <Row>
Change:
The video for the challenge needs to be updated due to changes in the challenge. We simplified the challenge to not introduce functions in this challenge.
Sure, I'll update the video.
Any status on this update?
Done.

Discussion:
id: 56533eb9ac21ba0edf2244bb title: Word Blanks challengeType: 1 <del> videoUrl: 'https://scrimba.com/c/cP3vVsm' </del> <ins> videoUrl: 'https://scrimba.com/c/caqn8zuP' </ins> forumTopicId: 18377 ---
Change:
When you sign in or change an option on settings, you get an alert banner up top. It could be a little thinner so it doesn't cut so close to the body elements <img width="1420" alt="Learn_freeCodeCamp_org" src="https://user-"
should we go all the way? <img width="1198" alt="Screen Shot 2019-10-19 at 12 39 56 AM" src="https://user-"
The layout element needs to be pushed below the notification. Currently it overlays on top of it.
Should I work on it?
Yes please. Note the the notification should be shorter in height and should also be "injected" in-between the nav and the layout instead of overlaying.

Discussion:
justify-content: space-around; flex-direction: row-reverse; margin-bottom: 0px; <ins> padding-top: 3px; padding-bottom: 3px; </ins> position: fixed; width: 100%; z-index: 1000;
Change:
When you mouse over the signin buttons on the buttons do not show the pointer cursor. They just show the default cursor. These buttons should show the cursor pointer like all the other buttons on freeCodeCamp.
Should I work on this? if allows
go ahead please.

Discussion:
border-color: var(--secondary-color); background-color: var(--secondary-color); color: var(--secondary-background); <ins> cursor: pointer; </ins> } .btn:active,
Change:
<!-- NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email We will look into it immediately. --Describe your problem and how to reproduce it: I can't get the challenge to pass even when I use the solution from the get a hint page. Add a Link to the page with the problem: Tell us about your browser and operating system: Browser Name: firefox Browser Version: 69.0.3 (64-bit) Operating System: linux mint 19 If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box): !
I can reproduce this with same Firefox version. On latest Chrome, it is working well.
ok, so I can get it to work in chrome. but still not in firefox for me.
Seems like a bug with firefox - I get this this error... <img width="357" alt="Screen Shot 2019-10-20 at 9 13 36 AM" src="https://user-"should be a valid flag. So that's why the solution passed our tests, but is failing in firefox. This will be a problem anywhere else we used the flag. Fortunately, it's not something that is used in many other places, if any.
Open bug report on Bugzilla about the flag - Doesn't look like it will be implemented anytime soon.

Discussion:
- text: Your code should not rely on any kind of loops (<code>for</code> or <code>while</code> or higher order functions such as <code>forEach</code>, <code>map</code>, <code>filter</code>, or <code>reduce</code>.). testString: assert(!removeJSComments(code).match(/for|while|forEach|map|filter|reduce/g)); - text: You should use recursion to solve this problem. <del> testString: assert(removeJSComments(sum.toString()).match(/sum(.*).*{.*sum(.*).*}/s)); </del> <ins> testString: assert(removeJSComments(sum.toString()).match(/sum(.*)/g).length > 1); </ins> ``` </section>
Change:
!
Hi, this could be resolved by removing the width of the -class. Should I do that and create a PR?
You should check locally if the fix will have any unintended side effects, of course a PR is welcome. Thanks.
I changed the to so the progress reports still align on mobile screens.

Discussion:
.map-title-completed { margin-left: auto; <del> width: 100px; </del> <ins> min-width: 100px; </ins> padding-left: 20px; }
Change:
Add a URL to the linkedIn input in your settings When viewing while logged in to your account... <img width="208" alt="Screen Shot 2019-10-23 at 11 05 37 AM" src="https://user-"Not logged in to your own account... <img width="195" alt="Screen Shot 2019-10-23 at 11 05 33 AM" src="https://user-"I can reproduce this on firefox and chrome, and locally and production.

Discussion:
const allUser = { ..._.pick(user, publicUserProps), isGithub: !!user.githubProfile, <del> isLinkedIn: !!user.linkedIn, </del> <ins> isLinkedIn: !!user.linkedin, </ins> isTwitter: !!user.twitter, isWebsite: !!user.website, points: progressTimestamps.length,
Change:
Hello. I noticed that the modals containing the user solution of the resolved corresponding certification challenge are not vertically scrollable when they should be so. A .modal{overflow:auto} css rule should be in the main stylesheet file of freecodecamp or the user-settings-section's one (if there is any), so modals become scrollable when they are full of text that they stretch beyond the viewport. here is a screenshot of the issue: !

Discussion:
.table > tfoot > tr > td { border: none; } <ins> .modal { overflow-y: auto; } </ins>
Change:
The File Metadata Microservice project as part of the APIs and Microservices projects has inconsistent instructions. On the freeCodeCamp project URL: There are two user stories: I can submit a FormData object that includes a file upload. When I submit something, I will receive the file size in bytes within the JSON response. However, on the Glitch project it says: I will receive the file name, and size in bytes within the JSON response. When you try the sample Glitch project, it actually returns a JSON response with the name, file type, and size. I'd be happy to do a PR to fix this, but I wasn't sure how to best address these inconsistencies.
Thanks for bringing up this issue. I have not completed this myself, but based on the example Glitch and the boiler plate repository, I say we should update the site to be consistent with the rest. In other words, we should update the user story in with If there are any concerns, feel free to comment.
, there are many inconsistancies between the latter projects and lessons, and the tests. I suggest we open a new issue thread as a todo, and compile all of the miss-alignments. Specifically, I struggled to go through the Advanced Node and Express lessons, because of poorly done tests, and the versions not being kept up to date.
thanks for chiming in. I haven't gone through them yet so I can't be sure. I can close this issue and open a new issue for tracking inconsistencies with the five projects in "APIs and Microservices Projects". Are there any other project groups that have inconsistencies we should focus on?
Are there any other project groups that have inconsistencies we should focus on? Other than, the Information Security and Quality Assurance projects not having tests at all, no. The issue is more-so in the lessons. Over half of Advanced Node and Express do not pass without looking at the tests.
"Over half of Advanced Node and Express do not pass without looking at the tests." Is this still the case now that we've moved from Glitch to If so, would you be interested in helping us improve the instructions to make these less ambiguous?
As far as I am aware, there are still issues in the following lessons: Create New Middleware, Logging a User Out, Registration of New Users, and Authentication with I do have a PR that should solve all of the current issues around this section. It links to an updated boilerplate, as well:

Discussion:
```yml tests: <del> - text: I can submit a FormData object that includes a file upload. </del> <ins> - text: I can submit a form that includes a file upload. </ins> testString: '' <del> - text: 'When I submit something, I will receive the file size in bytes within the JSON response.' </del> <ins> - text: The form file input field has the <code>name</code> attribute set to <code>upfile</code>. testString: '' - text: When I submit something, I will receive the file <code>name</code>, <code>type</code>, and <code>size</code> in bytes within the JSON response. </ins> testString: '' ```
Change:
I'm doing some practice at the link below but when I pressed "Run The Test" button the webpage froze Browser Name: Firefox Browser Version: 70.0 Operating System: Linux Mint 18.3 (Sylvia) !
When it happens: The issue happens if the test isn't done correctly, that is, if the padding of .red-box is not equal to 1.5em. If you set the padding to anything other than 1.5em or don't set the padding at all, the page freezes with some process running on an infinite loop probably (my laptop's fan started to turn on full speed). Can be reproduced on the following browsers: Browser Name: Google Chrome Browser Version: 78.0.3904.70 (Official Build) (64-bit)Browser Name: Chromium Browser Browser Version: 78.0.3904.70 (Official Build) snap (64-bit)Browser Name: Brave Browser Browser Version: 0.69.135 Chromium: 77.0.3865.120 (Official Build) (64-bit)Browser Name: Firefox Browser Version: 70.0 (64-bit) Canonical Operating System: Ubuntu 19.10
Definitely a regex issue -- pasting it into results in catastrophic backtracking. My first guess is the capture group just goes to infinity, happy to take a closer look.
I already made sure I put the padding with 1.5em within the red-box css class
Then there might be another issue, but when I tested, the issue only happened when the padding wasn't equal to 1.5em. If it was equal to 1.5em, the test passed and the modal with the save progress and go to next challenge came up and worked correctly.
This could be helped with landing, but the current automated challenge test suite needs to be replaced for the PR to be accepted. A potential solution is coming, but time estimates are long.
How does PR close this issue?
Not sure, go give it a test. My browser crashed on production and didn't when looking at this PR.
fixes a bad capture group in the regex for the solution test that was capable of causing stack overflow

Discussion:
- text: Your <code>red-box</code> class should have a <code>padding</code> property. testString: assert($('.red-box').css('padding-top') != '0px' && $('.red-box').css('padding-right') != '0px' && $('.red-box').css('padding-bottom') != '0px' && $('.red-box').css('padding-left') != '0px'); - text: Your <code>red-box</code> class should give elements 1.5em of <code>padding</code>. <del> testString: assert(code.match(/.red-boxs*?{(s|.)*?padding:s*?1.5em/gi)); </del> <ins> testString: assert(code.match(/.red-boxs*?{[sS]*padding:s*?1.5em/gi)); </ins> ```
Change:
I stumbled upon this issue when playing around with the challenge. If a user wanted to see what the output of the final variable (the converted version of the string) to the FCC console, it does not get rendered showing the converted entities. You can see in the screenshot below that the browser console has the correct values but the FCC console does not show the same thing. ! I am guessing there are several other challenges where the user would not see the HTML code and would instead send the rendered version in the FCC console.

Discussion:
getContext } from 'redux-saga/effects'; import { channel } from 'redux-saga'; <ins> import escape from 'lodash/escape'; </ins> import { challengeDataSelector,

function* logToConsole(channel) { yield takeEvery(channel, function*(args) { <del> yield put(updateLogs(args)); </del> <ins> yield put(updateLogs(escape(args))); </ins> }); }
Change:
Describe the bug ! The input text on the darkmode version of the donate page () are not readable so you cannot see what you are typing. To Reproduce Steps to reproduce the behavior: to '' with darkmode enabled. on the input labled 'Your Card Number:' and enter some numbers. entered input is not readable as the color of the input text is the same as the background-color of the input. bug applies to the credit card expiration and CVC inputs. ! Desktop (please complete the following information): OS: Win10 Browser Brave/Chrome/Firefox

Discussion:
isSignedIn: PropTypes.bool, stripe: PropTypes.shape({ createToken: PropTypes.func.isRequired <del> }) </del> <ins> }), theme: PropTypes.string </ins> }; const initialState = { donationAmount: 500,

const mapStateToProps = createSelector( userSelector, isSignedInSelector, <del> ({ email }, isSignedIn) => ({ email, isSignedIn }) </del> <ins> ({ email, theme }, isSignedIn) => ({ email, theme, isSignedIn }) </ins> ); class DonateForm extends Component {

renderDonateForm() { const { isFormValid } = this.state; <ins> const { theme } = this.props; </ins> return ( <Row> <Col sm={10} smOffset={1} xs={12}>

value={this.getUserEmail()} /> </FormGroup> <del> <StripeCardForm getValidationState={this.getValidationState} /> </del> <ins> <StripeCardForm getValidationState={this.getValidationState} theme={theme} /> </ins> <Button block={true} bsStyle='primary'

import '../Donation.css'; const propTypes = { <del> getValidationState: PropTypes.func.isRequired </del> <ins> getValidationState: PropTypes.func.isRequired, theme: PropTypes.string </ins> }; const style = { base: { <del> color: '#0a0a23', </del> fontSize: '18px' } };

} render() { <ins> // set color based on theme style.base.color = this.props.theme === 'night' ? '#fff' : '#0a0a23'; </ins> return ( <div className='donation-elements'> <FormGroup>
Change:
<!-- 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: For this challenge, the starting code in my editor contains the following lines: The challenge is Since the idea behind this challenge is the ability to combine conditions with the && operator, I would expect the starting code to instead read: Add a Link to the page with the problem: Tell us about your browser and operating system: Browser Name: Chrome Browser Version: 76.0.3809.100 Operating System: MacOS Sierra If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box):' <img width="1408" alt="Screen Shot 2019-11-10 at 5 36 23 PM" src="https://user-"
The instructions tell you what to do regardless of the seed code. If the seed code was provided as you describe, it would not be much of a challenge to solve.
I think the point of the exercise is to demonstrate the usage of the && operator, so even though it's easier with my suggestion, it's not trivial. If you'd rather not give that hint, though, there's no reason for the nested if statements in the seed code, and I was confused by them. The seed code should read:
The point of the exercise is two-fold. One is to teach the user how to use the operator. The other is to have the user figure how to achieve the same logic with the operator as without the operator using the nested if statements. I do not see any reason to change this challenge. I will let the other collaborators/mods give their opinions on this issue.
I'm with on this one - I don't think the seed needs changing. I redid the challenge and found that the nested if statements were helpful. You can create the intermediate solution: if you're more comfortable with nested if statements and that will pass all but the first two tests. This allows you to confirm that you've got the logic right before refactoring it into a single conditional. The only thing I would consider changing is to since 'combine' slightly implies that the new statement is built out of the original two, which isn't really the case here. Doing that should make it less confusing without watering the task down.
Thanks I like your suggestion to change the wording to
Any interest in creating a PR for that
Thank you for the link

Discussion:
## Instructions <section id='instructions'> <del> Combine the two if statements into one statement which will return <code>"Yes"</code> if <code>val</code> is less than or equal to <code>50</code> and greater than or equal to <code>25</code>. Otherwise, will return <code>"No"</code>. </del> <ins> Replace the two if statements with one statement, using the && operator, which will return <code>"Yes"</code> if <code>val</code> is less than or equal to <code>50</code> and greater than or equal to <code>25</code>. Otherwise, will return <code>"No"</code>. </ins> </section> ## Tests
Change:
<!-- 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-"

Discussion:
} </style> <header> <del> <img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail"> </del> <ins> <img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail"> </ins> <div class="profile-name"> <h3>Quincy Larson</h3> <h4>@ossia</h4>
Change:
The scrimba video for needs to be updated to match the updates made a while back.
Any update on this?
I want to do this kind of update, but I am not sure what accurate need to be updated. Could anyone explain more about that. Thanks.
Were you able to correct the video?
If there's no movement on creating a new video to update this, I'd be happy to take a crack at it.
I checked out the video and it seemed to be factually accurate. Is the video update just needing to match the condition of "Equal" or "Not Equal" like the actual problem is asking for?

Discussion:
id: 587d7b7e367417b2b2512b24 title: Use the Conditional (Ternary) Operator challengeType: 1 <del> videoUrl: 'https://scrimba.com/c/c3JRmSg' </del> forumTopicId: 301181 ---