HTTPS : Audit all codepen example links in the challenges for CSP issues.

[raisedadead]

After the HTTPS upgrade mixed content and CSP issues have been reported, with some of the codepen.io example links.

These need to be updated to https in the challenge links as well as within the code of the individual Pens for avoiding the CSP issues.

List of Pens :

Portfolio page of the Free Code Camp account on CodePen.io : http://codepen.io/FreeCodeCamp

Basic Front End Development Projects:

Challenge	Link	Update link to https	Update links in Pen
Build a Tribute Page	Link	Yes	Yes
Build a Personal Portfolio Webpage	Link	Yes	Yes

Intermediate Front End Development Projects:

Challenge	Link	Update link to https	Update links in Pen
Build a Random Quote Machine	Link	Yes	Yes
Show the Local Weather	Link	Yes	Yes
Build a Wikipedia Viewer	Link	Yes	Yes
Use the Twitchtv JSON API	Link	Yes	Yes

Advanced Front End Development Projects:

Challenge	Link	Update link to https	Update links in Pen
Build a JavaScript Calculator	Link	Yes	Not Required
Build a Pomodoro Clock	Link	Yes	Yes
Build a Tic Tac Toe Game	Link	Yes	Not Required
Build a Simon Game	Link	Yes	Yes

React Projects:

Challenge	Link	Update link to https	Update links in Pen
Build a Markdown Previewer	Link	Yes	Yes
Build a Camper Leaderboard	Link	Yes	Yes
Build a Recipe Box	Link	Yes	Not Required
Build the Game of Life	Link	Yes	Yes
Build a Roguelike Dungeon Crawler Game	Link	Yes	Not Required

Data Visualization Projects:

Challenge	Link	Update link to https	Update links in Pen
Visualize Data with a Bar Chart	Link	Yes	Yes
Visualize Data with a Scatterplot Graph	Link	Yes	Yes
Visualize Data with a Heat Map	Link	Yes	Not Required
Show Relationships with a Force Directed Graph	Link	Yes	Yes
Map Data Across the Globe	Link	Yes	Not Required

Updating Lists...

API Projects:

Dynamic Web Application Projects:

---

NOTE to Contributors :

1. Please check through the Pens and if any of them are using the http resources (for example Wikipedia viewer uses http://en.wikipedia.org/wiki/Special:Random) within the Pen's code.
2. If they do, please fork them, update the code to use https resources wherever possible.
3. CAUTION : Don't modify any logic without confirmation! Just move to https
4. Add a comment on this thread once done.
5. @QuincyLarson can fork back the corrected challenges to the Free Code Camp Page
6. Finally the affected, challenges can be updated to reflect the https links

Please ping me : @raisedadead on Gitter if you need any assistance.

Thanks!

[ghost]

Working on it

[ghost]

Everything has been updated to https

Challenge	Pen Link	Forked?
Build a Tribute Page	https://codepen.io/theflametrooper/pen/wGdeYM	Yes
Build a Personal Portfolio Webpage	https://codepen.io/theflametrooper/pen/xVdryJ
Build a Random Quote Machine	https://codepen.io/theflametrooper/pen/ZWKyVa	Yes
Show the Local Weather	https://codepen.io/theflametrooper/pen/WwjOWo
Build a Wikipedia Viewer	https://codepen.io/theflametrooper/pen/xVdrMa	Yes
Use the Twitchtv JSON API	https://codepen.io/theflametrooper/pen/JXNJxm	Yes
Build a JavaScript Calculator	https://codepen.io/theflametrooper/pen/pyPwBw	Yes
Build a Pomodoro Clock	https://codepen.io/theflametrooper/pen/yObXro	Yes
Build a Tic Tac Toe Game	https://codepen.io/theflametrooper/pen/MymoRO	Yes
Build a Simon Game	https://codepen.io/theflametrooper/pen/ZWKyZv
Build a Markdown Previewer	https://codepen.io/theflametrooper/pen/RaVZrN	Yes
Build a Camper Leaderboard	https://codepen.io/theflametrooper/pen/WwjErj	Yes
Build a Recipe Box	https://codepen.io/theflametrooper/pen/EKmvPO	Yes
Build the Game of Life	https://codepen.io/theflametrooper/pen/dMWzGx	Yes
Build a Roguelike Dungeon Crawler Game	https://codepen.io/theflametrooper/pen/YqVxqz	Yes
Visualize Data with a Bar Chart	https://codepen.io/theflametrooper/pen/zqwdqm
Visualize Data with a Scatterplot Graph	https://codepen.io/theflametrooper/pen/EKmvKO	Yes
Visualize Data with a Heat Map	https://codepen.io/theflametrooper/pen/aNWyNP	Yes
Show Relationships with a Force Directed Graph	https://codepen.io/theflametrooper/pen/xVdLVM
Map Data Across the Globe	https://codepen.io/theflametrooper/pen/qZmXZw

[raisedadead]

@theflametrooper Thanks a lot for this list and your efforts.
I'll do the QA and get back once we have forked these into the Free Code Camp Account.

[ghost]

Seems like the HTTP Pens were deleted before the live site got the update? I just hit a 404 following http://codepen.io/FreeCodeCamp/full/wMQrXV in the first challenge.

[sludge256]

@kehugter That pen is still up for me.

[ghost]

@sludge256 tried again after your comment and in fact it was my blanked referrers that were causing it to 404. That bug is entirely on codepen's side.

[raisedadead]

@theflametrooper I am QA-ing and forking to FCC Account. I'll mark the status of the fork on your list above.

@ Contributors : Please refer the list for QA-ed Pens.
All the forked and QA-ed Pens are available on the collection :

http://codepen.io/collection/AWQMxq/

PR's on the forked links are welcome! Do tag this issue as refer #7700 in the PR (Do not add Closes tag).

[ghost]

@raisedadead I'll take care of this PR. So all I have to do is change the links on the challenges to the new links in the collection?

[raisedadead]

@theflametrooper That's correct. Make sure everything to be https
Ping me in the Chat if you have queries

[raisedadead]

@theflametrooper pens updated, I might have fixed missed settings in the pens as well as I was forking, well I could see those in the console tab of dev tools.

Please update the PR.

I have left some pens purposefully because they are broken even with https update.
But for now you can just update the PR and address the Pens that have been QA-ed.

Thanks.

[ghost]

@raisedadead The pr has been updated...

[erictleung]

Help wanted: the API link for the Force Directed Graph project should have https. Otherwise, your graph won't work.

[raisedadead]

Pens that are directly fixed in the Free Code Camp's CodePen account :

Show the Local Weather - http://codepen.io/FreeCodeCamp/full/bELRjV <-- This one has to be loaded over http to work.
Build a Personal Portfolio Webpage - https://codepen.io/FreeCodeCamp/full/YqLyXB/
Map Data Across the Globe - https://codepen.io/FreeCodeCamp/full/mVEJag
Show Relationships with a Force Directed Graph - https://codepen.io/FreeCodeCamp/full/KVNNXY

[SnoopJ]

Here's a forked pen that fixes Visualize Data with a Bar Chart, changed to pull the data from the GitHub link provided in the challenge, using $.getJSON() instead of $.get()

[raisedadead]

@SnoopJeDi You are the man! I'll fork it back to the FCC account. Would you like to make a PR to change it in the challenge?

[raisedadead]

@SnoopJeDi Here is a the forked copy under FCC
https://codepen.io/FreeCodeCamp/full/vGjLVZ/

[benschac]

Hey, is there anyway to flag frontend projects as in construction or something. That weather App project with the geolocation API is really messing people up still. Even just a notification or grey out explaining the situation.

Maybe a short term fix is adding another requirement to use a third party service like https://geocoda.com/location/ to get coordinates?
or, add a field that the user needs to input.

[benschac]

It's super frustrating, especially to new users if something like this isn't working.

[raisedadead]

@benschac Hi, Are you by any chance talking about a scenario same as #7853 ?

[benschac]

Heck yes. There needs to be some kind of notification to end users to let them know this project is under construction or something. A new comer isn't going to have a clue that this is actively being worked on.

[raisedadead]

Apologies for the issues and we sure share frustration as well.
As you would have noticed, we have been looking for alternatives, unfortunately there are a variety of considerations.

Please continue and check the discussion on that thread.

[benschac]

That's totally cool. Is there anyway to flag the content on the site as under construction? I fear this will detract new users when they get stuck on something that literally doesn't have a solution.

[raisedadead]

@benschac

Nope.
We can at best add a Hint/Warning as I have mentioned my comment on the other thread.

We wont be blocking the entire page for the challenge with notifications.
The issue is not on Free Code Camp website, but a challenge that requires use of CodePen.

Again I urge you to continue further on the other thread which is specific to this challenge.

[benschac]

It not about me. I know what's going on. It's about the thousands of users who are currently trying to solve this issue. There should be a better way of notifying users a project is down or not working :(