Course Idea: Online Interactivity (Canvas, SVG, etc)

[cosmicpoi]

Excuse me if this is not the right place for this, since this is my first time contributing. I asked around in the Gitter and was told that I should open a new issue if I wanted to propose a new challenge or lesson.

I'd like to propose that we add a course, or a series of courses, on standard libraries for online interactivity - which is to say, canvas, SVG, and WebGL.

Why this is needed

Nowadays, it's extremely common to need to implement graphics - interactive or not - within webpages. SVG is often used for logos and icons, while canvas and THREE.js are often used for interactive demos.

These have become vital skills in today's web development environment, as these libraries are often integrated into webpages to give them extra flair, or cohesive interactive experiences.

Perhaps more importantly, these libraries can be used by new coders to quickly build up cool and interactive portfolios to show people. Many new coders spend a long time building apps, and only view programming in a static way. There is a paradigm difference between building apps and building animated displays, and coders on freeCodeCamp currently have no exposure to this.

Unfortunately, there is currently no documentation (as far as I'm aware) on freeCodeCamp on any of these libraries. I'm proposing that we add this.

Structure

The stretch goal would be to have lessons and documentation on canvas, SVG, and THREE.js. It seems that the 'responsive visual design' module already has basic coverage of animation concepts.

There is currently an empty module for Game Development which is 'coming soon.' The three libraries I allude to could be organized under a 'Game Development' module, or a new 'Interactive Media' module. Alternatively, they can be split up and each given their own module.

Possible Action Plan

I have some time this summer, so I'd like to spend time writing a few lessons and/or challenges. If we decide that this is worth pursuing, I'd start off with a basic documentation of canvas, then write a few simple challenges, (make a physics sim, etc.) including integrating a canvas demo into a portfolio site.

Thoughts? Thanks!

[systimotic]

Hi @alan-luo! This is definitely the right place.

I agree, these tools are becoming more and more common. To me, for it to be included in the main curriculum it has to be a skill employers really value. I'm not sure if it's at that point yet. I think of it as something that's good to know, but employers won't really care if you do or don't know it, they care about whether you can learn it when it's needed. However, that's just what I think. It's not backed up by experience or data.

I'm not sure if this content is great for the main curriculum, but I would personally really like to see this kind of stuff on the YouTube channel and the blog. The blog already has a post on SVG and a few posts about canvas. I think it could use more about animation, though!

I don't know anything about the plans for the game development curriculum, but I assume that would include canvas.

I'd really like to hear what others think about this.

/cc @QuincyLarson

[cosmicpoi]

On a somewhat unrelated note, I think for game development, it's worth mentioning that basic game development skills can be extremely useful for rapid prototyping, even if you have absolutely no interest in games.

I did some work on a swarm robotics project a while ago - we used Unity for prototyping software and behavior, which saved us tons of time in actually printing circuits.

Talking about using game dev for prototyping seems more suitable for a blog, but I'm just putting it out there.

[QuincyLarson]

@alan-luo These are all good ideas. Before we attempt to create interactive challenges on these, we should write text- and screenshot-based tutorials for our guide: https://github.com/freeCodeCamp/guides

Would you be interested in helping with this?

[cosmicpoi]

@QuincyLarson Yes, would be happy to help!

How shall we go about organizing these guides? I feel like each of SVG, Canvas, and Three deserve their own separate folders, since they're feature-full libraries.

[QuincyLarson]

@alan-luo I agree. I recommend first coming up with a list of the topics you'd like to cover, then creating a general overview of each of these technologies for the main index.md file for each folder. Then you can create subfolders with sub-topics.

[cosmicpoi]

@QuincyLarson Asked this in Gitter to no response: "should I open PRs every step of the way, or when I’ve finished the whole thing?"

[QuincyLarson]

@alan-luo you should open a single PR with multiple commits if necessary. Then you can ask for a code review once you've made enough progress that you want feedback.

If you're writing guide articles, you can make one PR per guide article.