Freecodecamp: Move all images on the freeCodeCamp platform over to S3

[QuincyLarson]

These are currently being hotlinked from external websites. We should instead put them into S3 so we can reliably serve them.

• [ ] create a list of all the images we're currently hotlinking
• [ ] download all of those images into a directory and rename them
• [ ] send me the zip file so I can upload all of these to freeCodeCamp's AWS S3 bucket. I'll send you the path to the bucket
• [ ] update the paths to each of these images in the codebase and verify that all the images render correctly
• [ ] merge the pull request and deploy it to beta

[manaswinidas]

Is anyone working on this? I will be glad to work on this otherwise.

[systimotic]

@manaswinidas That would be great! Nobody is working on these yet, you can go ahead 👍

[systimotic]

This poses a new question: how will contributors add new challenges with images?

[QuincyLarson]

@systimotic Very few of the challenges have images, and we're hoping that even fewer have images in the future. We hope to gradually remove a lot of the images that are currently in the curriculum to make it faster and simpler. For example, we've eliminated almost all of the slide challenges.

[BhaveshSGupta]

Hey @QuincyLarson, Can we host JS and Node images on S3 for #13798. Should I send you zip of these? Then we would be able to remove iconic as an dependency which would help in closing of #13798 and #15739

[tchaffee]

Just a small recommendation for this issue: it makes future changes much quicker if there is an app-wide setting for the image base path that can be changed in one place. Maybe put it in the .env file?

.env:

IMAGE_PATH='https://s3.amazonaws.com/freecodecamp/images/'

And then elsewhere in the code:

const fCClogo = process.env.IMAGE_PATH + 'freecodecamp_logo.png';

Doing it this way also allows local development to depend only on local resources by just changing the .env file to point to localhost.

[QuincyLarson]

@BhaveshSGupta Yes - we can host custom SVG images outside of font awesome on S3. That's a good idea.

@tchaffee That's an excellent idea. We can implement it that way. The path is:

https://s3.amazonaws.com/freecodecamp/

@tchaffee Since you came up with this idea, would you be interested in updating the sample.env to include this path?

[tchaffee]

@QuincyLarson yes, I'll submit a PR to include this in sample.env.

[tchaffee]

For the key in sample.env, I'll be using IMAGE_BASE_URL since that's more accurate than IMAGE_PATH.

[QuincyLarson]

@tchaffee OK - I agree that that's more descriptive.

[tchaffee]

@QuincyLarson, per the convo at the PR above, would it be better to use a more specific base url for images? You suggested

https://s3.amazonaws.com/freecodecamp/

Assuming all the images are in an images sub-folder, would the following be better?

https://s3.amazonaws.com/freecodecamp/images/

[QuincyLarson]

@tchaffee Thanks for your extreme patience. Yes - I agree that we should namespace these. I've created that folder and we can put those images there. I've updated your PR and merged it.

[mariobro]

Have all images been moved over already or is this issue still open? If it's still open and someone is patient enough to teach me how to do so I don't mind trying it out!

[raisedadead]

This is still open @tchaffee @mariobro if you guys are interested.

[wagnerluis1982]

Hi, guys, I'm interested in resolve this issue. I'd like to know, what is really missing to get done?

[ReveurGAM]

@QuincyLarson On 10/7/17, you said "Very few of the challenges have images, and we're hoping that even fewer have images in the future. We hope to gradually remove a lot of the images that are currently in the curriculum to make it faster and simpler. For example, we've eliminated almost all of the slide challenges."

As an educator, I'm afraid I don't understand. Images are one way to help learners. Not everyone benefits from text. The less varied the presentation in a challenge, the fewer the people it will help.

I realize I'm just a noob on FCC and mostly giving you all more work than anything as I work through Beta, so I apologize if I'm out of line here. I was under the impression that FCC was created to help more people learn programming. Is that wrong? I won't explain my stance unless you're interested in knowing, but I'd ask that you read this (kinda long) article. Learnable Programming.

Thanks to everyone for all your hard work!

[QuincyLarson]

@ReveurGAM Thanks for your feedback. We have a ton of videos and tutorial articles with lots of images that explain concepts as well. For the challenges, we want them to be focused on interactive coding, and following clear instructions.

Images take time to load, take data, and don't necessarily look good on all devices. One of our goals is to make freeCodeCamp as small as possible so it won't use up much data, and it can easily be stored and run many different places. Images can sometime add additional vital information, but they are often unnecessary.

Also, I enjoyed your article, but the Khan Academy environment you link to seems to be returning a 500 error.

[ReveurGAM]

@QuincyLarson I'm afraid you may be laboring under the misapprehension that I wrote that article...Are you referring to the Khan Academy link at the top? It worked for me just now.

As for images being unnecessary, I would beg to differ. Yes, an image added as fluff, or that is poorly chosen, is unnecessary, however there are real reasons for using images. I don't know your background, so please forgive me if you know this.

_Mood_: A well-chosen image can lighten up the learner's mood, helping to dispel some of the frustration they may feel due to studying, not grasping concepts, and life in general. This isn't to say that such images need to be on every page - strategic placement is best.

_Learning style:_ Different people have different ways of learning. Having a varied approach catches and holds the interest of more people.

_Sensory preference:_ Not everyone wants to - or can - learn visually. Some people are primarily auditory, while others prefer kinesthetic (doing) activities. Even within the realm of one sense, they aren't all the same: for example, some need images, others need text, others need both. Some can't learn effectively from text and need images, too.

And so on. Perhaps, if you can briefly summarize the aim of FCC, that would help me to know what kind of feedback you are NOT looking for, thus saving both of us time. :)

[QuincyLarson]

@ReveurGAM The link is indeed working again.

Thanks for your feedback. We may consider adding more images in the future.

Our feedback from campers suggests they aren't necessary in most cases.

[QuincyLarson]

We've removed virtually all images from freeCodeCamp's curriculum for accessibility reasons, and to reduce the data footprint of our app (which we'l continue to reduce).

We just launched the new learning platform and expanded curriculum here: https://learn.freecodecamp.org - take a look at it and let me know what you think :)