Freecodecamp: Error in all Certificate Project sample CodePens

[KartikSoneji]

Forum post: https://www.freecodecamp.org/forum/t/error-in-all-certificate-project-sample-codepens/362201

I have 3rd Party cookies disabled on my Browser, and almost all of Certificate
Project sample CodePens are broken for me.

Eg: https://codepen.io/freeCodeCamp/full/KaNGNR

This is all that I see:

This is caused by trying to access localStorage.setItem at the top of the script.
If I comment out the line: localStorage.setItem('example_project', 'D3: Tree Map');, the pen works fine.

I think that accessing the localStorage is not needed, and that line should be removed.
Alternatively, the line can be moved to the end of the script tag or wrapped in a try/catch block so that even if it fails then the rest of the script can execute properly.

This is an issue that affects all sample freeCodeCamp CodePens, but it is not noticed on projects that do not use JavaScript.

[KartikSoneji]

Update: I am working on a PR: https://github.com/KartikSoneji/testable-projects-fcc

[KartikSoneji]

I went through the repository, and turns out that the CodePens are not up to date with the repo.

The code in the repository does not use localStorage: https://github.com/freeCodeCamp/testable-projects-fcc/blob/master/src/projects/d3-bar-chart/index.js#L5

[moT01]

I took a look at this and I don't see the purpose of setting the local storage. @scissorsneedfoodtoo, do you know if that's necessary or what the purpose of it is?

[scissorsneedfoodtoo]

@moT01, I agree, I don't think localStorage is necessary. I'll dig into this and make sure the code on CodePen and in the testable projects repo is synced up.

[scissorsneedfoodtoo]

@moT01, I did a bit more digging into this issue and here's what I found.

It seems like those CodePen example projects are slightly outdated, and a lot of them were last updated in either June or October 2018: https://codepen.io/freeCodeCamp/details/GrZVaM. The one exception is the Scatter Plot project, which I updated in April 2020. The changes are being tracked in the testable-projects repo, but the version on CodePen still uses localStorage.

When @ValeraS brought the D3 projects into the testable-projects repo in December 2018, it seems like some of the variable names and spacing were changed. Those changes were probably done automatically or suggested the the linter that repo uses.

Either way, whatever's in the testable-projects repo should be the latest version of each D3 project -- it should be fine to copy whatever's there into CodePen. If that all sounds good to you, I can get started on that.

[RandellDawson]

It would be nice if we could configure those projects to auto deploy to Netlify when anything is merged master for them. This would keep us from having to manually copy/paste over to Codepen.

[scissorsneedfoodtoo]

@RandellDawson, agreed. Either Netlify or GitHub pages like you or @moT01 mentioned would be a huge improvement.

Seems like Netlify launched support for monorepos late last year. Might be able to go with that in the testable-projects repo without too many changes: https://www.netlify.com/blog/2019/10/09/launching-monorepo-support-for-netlify-sites/

[scissorsneedfoodtoo]

@KartikSoneji, thanks again for opening an issue about this.

We synced all the example CodePen projects with the most up-to-date versions in the testable projects repo. Now none of the example projects on CodePen use localStorage.

Will close this for now, but please let us know if you're still having issues.

[KartikSoneji]

Hi @scissorsneedfoodtoo

I still get a popup from codepen, but the project works properly.

Thanks for fixing this issue.

[scissorsneedfoodtoo]

@KartikSoneji, thanks for confirming that everything is working again.

It seems like that alert is coming from the test suite at https://github.com/freeCodeCamp/testable-projects-fcc. You may need to enable third party cookies to get that working, though it might not be a strict requirement. If you just want to check out the example project before you start building your own, it shouldn't be a problem.

[KartikSoneji]

I agree, the popup is a minor issue since the page works as expected after dismissing it.