This is currently being worked on in the content-struture-tests branch.

We are considering thus far:

• Testing the folder structure inside content
• Testing file presence in each folder inside content
• Testing JSON properties for all relevant files are present and follow expected structure
• Testing that all mentioned slug strings correctly reference other files

Is there an option yet to hide the Challenges section per video? Setting canContribute to false only hides the community contributions.

When I browse between the various tabs below the video the page autoscrolls much farther down than it needs to. I can imagine wanting to be clicking around these while the video is playing.

I realize my comments keep leading in the direction of more work for me, but in looking at the additional flexible tabs (that i"m using for "REFERENCES" and "VIDEOS" right now), I wonder if these might feel less "blank" to me, if everything included three elements:

1. Emoji icon (Custom one / Coding Train character?)
2. Title (linked to URL)
3. Short description

I imagine this relates to the discussion around #57.

e.g.

    {
      "title": "References",
      "links": [
        {
          "icon": "🔢",
          "title": "Fisher-Yates Shuffle"
          "url": "https://bost.ocks.org/mike/shuffle/"
          "description": "The Fisher-Yates shuffle is an algorithm for generating a random permutation of a finite sequence",
        },
        {
          "icon": "✏️"
          "title": "copy()"
          "url": "https://p5js.org/reference/#/p5/copy"
          "description:": "The full details about copy() are on the p5.js reference.",
        }
      ]
    },

Here's what it looks like me putting all this metadata just in the title

As of 27/10, this page component was started by Rune. It holds most of the structure present in the designs in the unfiltered state. There expanded version of track cards are missing, and the logic associated to actually filtering the results based on a selected filter.

• Page header
• New to coding CTA
• Character pop out
• Filter panels
• Base Track Card
• Expanded Track Card
• Filtering logic
• Mobile version

Some tweaks to make:

• The breadcrumbs should be removed, since it doesn't really provide useful navigation at this point
• New to Coding CTA should collapse in mobile
• Borders of filter panels look weird when expanded

This page has not been created yet. The following is a general list of sections that summarizes this page structure. Feel free to add specific components that require specific attention or branch into other issues.

• Header
• Biography section
• Talks section
• Acknowledgments section
• Mobile device version

Just opening a thread to discuss the current example code, I'm referring to this area:

For the ml5.js project, we are working on the design for hosting examples, there are some things about it that I like—thumbnail image, short description, etc.

I also wonder if the code examples should be more prominent, maybe the default tab or even in the place of the timecodes? I am not sure about this.

Opening an issue related to discussion in #90. When porting content over from the old site, there are some links that need to be updated. For any link to a Coding Train video it should:

• Link with relative path to this site, e.g. /challenge/168-the-mandelbulb.
• If no page exists on this site, then it should link to a YouTube video (and we should probably open an issue as a reminder to create the page and re-link.)

@klinegareth @fdoflorenzano let me know if this sounds right to you!

Meta issue. I'll spend some time creating issues and TODOs based on the missing parts for the site so that we can divide our work.

@klinegareth and I just met and talked through the organization of the content directory. I'm writing up a summary of where we landed (Kline feel free to chime in if I've missed something or am off base with something!)

1. All videos will have a "canonical" home base. This is likely to be either in a main track or part of the list of "challenges."
2. All videos can be listed as part of multiple places, main track, side track, etc.. But the file lives in its homebase directory -- e.g. if a coding challenge appears in a main track, the video's JSON file will live inside the challenges directory but be referenced via full path from the track.
3. We can use subdirectories to help organize videos inside of directories. Mostly to be able to put videos from different "chapters" of a main track in different directories.
4. For the most part, side tracks will not have their own folders inside of videos. Rather they are collecting videos together from main tracks and challenges.

A question came up -- are we planning a page on the site that collects all the challenges together? Regardless it felt weird to us to not have a json file that keeps a list of all the challenges so we are thinking of adding that in.

Here is a sample of what we imagine the directory structure looking like:

I need to do a pass to clean-up, add, and clarify topics. This thread can track the discussion.

Starting with:

• I have "basics" and "for beginners" as a tag for videos (Code! Track, challenges, and some Nature of Code videos). I think maybe the topic should be "beginner friendly" (open to suggestions!) and that it should not be applied to Nature of Code videos.

Make a Tabs component like the one we used for Processing, with the slight difference that it should be able to take any component as child:

<Tabs labels={["First Component", "Second Component", "Third Component"]}>
  <MyComponent />
  <MySecondComponent />
  <MyThirdComponent />
</Tabs>

In the code example above, there would be three tabs with the labels, and when you click a tab, the corresponding component will be shown.

This is an approximate design for the component. Note that we are only interested in the white bar as a part of the Tabs component. The rest will be one of many child components being passed to the Tabs component.

The design might change a bit, so just follow the layout above casually. We're mostly after the functionality.

• List tags
• Select tags with callback
• Expand see more languages with callback
• Make icon work
• Responsive design

On tracks that have enough videos to fill the sidebar, scrolling down and clicking on a video scrolls to the top of the video list:

.

This issue keeps track of page descriptions for the main pages in the new Coding Train site. We've been filling it with Lorem Ipsum thus far.

• Description for /tracks page.
• Description for /challenges page.
• Description for /faq page.
• Description for /guides page.

This issue can hold updates on how progress on the character illustrations are going, and also contain discussion on how to use these illustrations across the site.

From what I'm aware, illustrations are being uploaded here, but I don't know if more are coming or not.

@shiffman have you been able to link back with Jason?

Some progress on the FAQ's page was done a while ago by someone at DSI, but back then the range of what was needed wasn't really clear so development has been paused for a while now. Specifically, what kind of content for answers should we support, and linked to that how are we loading that content into the site's setup.

Currently we've just got collapsible rows of question and answer containing only text, and we aren't loading content from any file source yet. Looking at the existing site, lists of URLs may be needed to be supported. Some early designs also include button like links and even images:

So a question for @shiffman would be what would be the extent of content for these answers.

Is a main text answer, a list of URLs and a couple images for each one enough? So that they are shown always in the same manner and can be loaded as simple JSON files. Or do we need rich document formatting? Like MD files with images? We currently are able to load MD files into the system, but adding local images to them may need some work.

Maybe working on the content for these questions could help push this forward.

This page was started by @fdoflorenzano and is still in progress.

• Page generation based on track URL and videos separately
• Track header
• YouTube video player component
• Track timeline
• Timestamps timeline
• Video player panel
• Video details tabs
• Community contributions panel
• Challenges panel
• Mobile layout change for track timeline and timestamps
• Mobile layout change for video details tabs
• Separators panels for mobile with characters
• Link complete page to content data
• Mobile version

This page has not been created yet. The following is a general list of sections that summarizes this page strccture. Feel free to add specific components that require specific attention or branch into other issues. Also, lot's of this section probably can be shared with #26

• Page header
• New to coding CTA
• Character pop out
• Most recent challenge panel
• Filter panels
• Base Challenge Card
• Challenge Card Layout
• Pagination
• Filtering logic
• Mobile version

We should start developing the "New to Coding?" guide that gets referenced across different pages, but we aren't completely sure where we are regarding it's content. I believe DSI shared this document with someone in the Coding Train team, with the intent of working on some of this content. Maybe we can re-use it for this end.

Below some of the early designs of this page:

I am working on the names and roles here:
https://docs.google.com/document/d/1Yw79zplmjslIGCsikg-MWD_ZARcPSeP5-kH524WKEDc/edit?usp=sharing

@fdoflorenzano mentioned during our meeting this could use some design cleanup as well.

Yesterday in my YouTube live chat someone suggested "Showcase Station" as the new name for "Community Contributions", any thoughts on this?

The way the site is currently the thumbnail is cropped at the top and bottom. It also overwhelms the page scale-wise but maybe that's the point? I think sometimes I just feel awkward about seeing my giant face 😅 so I might not be the right person to judge.

Here's a giant face one. YouTube thumbnails are often shown so tiny so the design is sometimes optimized for that. I probably shouldn't b/c everything on YouTube is about the clicks but I'd be ok with designing the thumbnails for the website as first priority? We could have different images but not sure that is realistic. Regardless you can see how it cuts off the top and bottom.

While checking one of the site's previews, I noticed that there's some inconsistent tagging of videos.

• There's both a p5 and p5.js tag included in languages. If filtered, it looks like only 1 video is tagged with p5: p5.js Web Editor: Uploading Media Files.

• There's still the generic language1 and language2 tags in a bunch of videos.
• Same thing with topic1 and topic2
• There's also a "Pi, p5.js" somewhere, that's most likely a typo

Some notes on the about page:

Noting for @elizabethslash that we'll want to write a new bio for here!

• I don't think "Visit my website" adds anything, this is basically my website now! (I should probably deprecate shiffman.net or just make it a one page thing or something.)
• I guess this is the place for my personal socials rather than the official Coding Train ones, it's a little muddy which ones are which but I might just do the icons not sure the text adds a lot? (or is that good for accessibility reasons?)
• I wonder if instead of talks, we could just have things that are "featured" here. For example, I might feature the Nature of Code book and website and maybe ml5.js or something like that? And I can keep this curated? Should it always be just two things>

Jason and I have been working on the track thumbnails. We have one ready to go for Nature of Code!

JPG and source InDesign files:
https://drive.google.com/drive/folders/1v9JZhrC7ORPkwzpjAUWKo_zl_CG8wUvk

@fdoflorenzano Do you want to try incorporating this one and see if it works? Then we can produce the rest? Is this the right aspect ratio / resolution?

This might be an issue just for me, but it's a little unclear which link goes to the contributor's website (profile, github, etc) and which goes to the contribution itself. Since clicking on the thumbnail doesn't do anything, the (usually) next closest/longest link is the author url, not the play button. For some contributions, e.g. source code on GitHub, it won't really matter, but it's a bit confusing when you're expecting to go to a p5.js web editor page and it takes you to someone's personal site. Interested to hear what you all think though!

When hovering over text, the line height seems to change differently for each letter:

This issue tracks progress creating a new maintenance guide for the website

Would it be possible to enable using chapters in side tracks? Or should we make any track that would need chapters a main track?

Opening a thread to discuss the footer (or a reminder to discuss the footer at our next meeting). Maybe I should divide this discussion up into different sections but for now I'll just call them A, B, and C:

Section A

• @elizabethslash this is definitely a place to rewrite with more playful, fun language.
• If we had something else we want to feature here I would be glad to bump "Shop" and put it soehwere else.
• I think an emoji or CT character could be nice to include. Or perhaps the service logos should go here? For example instead of "Become a Member" it could be a YouTube box that has the option to "subscribe" or "join" (this is the paying thing). Join the Community could just be exclusively about Discord.

Section B

• we should add Twitter
• Also, um, Twitch? I started streaming on Twitch, I'm not sure if I will continue.
• What is "Go Now" under About?

Section C

I think we can remove this entirely? I mean I could include sponsor links with discount codes there (maybe that goes somewhere on the site) but that might feel a little too sales-y for every page. We could do Friends of The Coding Train in which case I would include:

• https://itp.nyu.edu/
• https://processingfoundation.org/
• https://nebula.app/

This really isn't an urgent issue, but would it be possible to have the Coding Train logo link to the site outline? I keep clicking it expecting it to go to a homepage.

This page has not been created yet. The following is a general list of sections that summarizes this page structure. Feel free to add specific components that require specific attention or branch into other issues. Also, lot's of this section probably can be shared with #27

• Video player panel
• Video details tabs
• Community contributions panel
• Challenges panel
• Mobile version

Our current content folder structure looks like this:

content/
  tracks/
  videos/

The original reasoning for not having subfolders based on tracks for the videos is that the videos can belong to more than one track. However, this results in a huge list of video folders, and Dan and his team would like the ability to group videos under a track while preserving the ability to link to a video from another track. Here's the suggested new folder structure:

tracks/
  main-tracks/
    code-programming-with-p5-js/
      index.json
      index.png
      videos/
        01-introduction/
          index.json
          index.png

The new structure removes the videos folder in favor of having a videos folder inside each track. It should be noted that adding a video to a track's video folder will not automatically add the video to the track. It is still the track's index.json file that determines this, and we merely use this structure to make it easier to manage the files.

I have a few open questions:

1. What happens with challenges? Do all challenges belong to a track or do we need a separate challenges folder next to tracks? Both are fine with me, as long as we preserve the ability to load all challenges for the challenges page.
2. Getting rid of the videos folder also means getting rid of the subfolder for type of video (lessons, guest-tutorials, etc). rather than having these inside each track's videos folder, I suggest we move this to a property in the video's index.json file.
3. How do you reference a video from another track folder in a track's index.json file? I suggest we simply use the name of the video folder is it's in the track's own videos folder (e.g. introduction-to-p5) and a folder path if it's a video that is in another track's videos folder (e.g. nature-of-code/videos/introduction).

Remember to branch from the content branch and submit the PR to that same branch.

@fdoflorenzano Let me know if you have questions.

This issue tracks the progress updating the user guide around passenger showcases.

I'm only seeing 2 topics show up for the slide puzzle challenge, there are three listed in the JSON file. (I'm working in #60 right now).

  "languages": ["JavaScript", "p5.js"],
  "topics": ["pixels", "arrays", "game"],

Also, it's my expectation looking at the page that I could click on a language or topic and see all other videos that have the same category. I don't feel this is a necessary feature, however, I wonder if it would make more sense to bury those terms lower on the page, especially if they are not clickable?

In reviewing the guide pages #76, I thought it might be useful to open a thread to discuss the options for how we want to design and communicate the system for viewers to submit projects for the passenger showcase. This is my memory of where we landed in an earlier discussion. Offer two options to viewers:

1. submit a form with required fields (url, author name, thumbnail image) --> this would auto-generate a pull request with JSON files and the image to the correct contributions directory?
2. Manual pull request creating the JSON and image file in the correct contributions directory.

How we design this process will inform what we write in the guide. I would also create a video to show the new website and how to submit!

Made this issue to keep track of 404 page discussion.

This is the doc with the copy of content for it (shared by Elizabeth): https://docs.google.com/document/d/11wY9ACd1nPLYl4-UIEQDjnCThZZqjad_mOPevlRtLDQ/edit?usp=sharing

Right now, we can add code examples to a video in it's corresponding JSON file:

"codeExamples": [
   {
     "title": "Random Square Design",
     "description": "Using the random() function to draw randomly sized squares",
     "image": "https://processing.org/static/b8793fda1d825d4d138038d97deff7a2/b2a35/GameOfLife.webp",
     "language": "p5js",
     "folder": "folderWithCode",
     "webEditor": "Sl8ml_Lz8"
   },
...
]

and the setup allows a src folder to be added alongside this index.json file, where multiple folders can be sub-added and can be referenced using the "folder" property of a code example specification.

To continue with #57 and #66, we need to add the images into this whole setup. One comes to mind:

We keep a similar approach to what we have now and add the possibility of creating an images folder on each video folder that contains only images. All these images can be then referenced by the index.json file of the video, specifically by an "image" property of code examples. This can also help us to add images in other parts, like for thumbnails for links.

So folders for videos would be:

[videos|journeys]
└─ video-slug
   ├─ index.json
   ├─ src
   │  ├─ code-folder-1
   │  └─ ...
   ├─ images
   │  ├─ image1.png
   │  └─ ...
   └─ contributions
      ├─ contribution-slug-1.json
      ├─ contribution-slug-2.json
      └─ ...

and the code examples portion of index.json file would be:

"codeExamples": [
   {
     "title": "Random Square Design",
     "description": "Using the random() function to draw randomly sized squares",
     "image": "image1.png",
     "language": "p5js",
     "folder": "code-folder-1",
     "webEditor": "Sl8ml_Lz8"
   },
...
]

Also, as I'm writing this, I realize I'm not sure if every code examples would have a corresponding code folder with files. Maybe sometimes it just lives in the p5editor?

Just noting that we should probably update the thumbnail aspect ratio on the about page to match the challenges page.

About page:

Also, @fdoflorenzano should the titles on the challenges page be bolded like they are on the about page? I think that might look nice but defer to you all!

We've been wondering if a archived tracks page would also be needed, as the existing site has.

@bravomartin and I talked about how it could be easy to add. Maybe by having new boolean property in track files that label them as "archived", and that moves them from the /tracks page to new /archive one. The base for this new /archive page could be similar to /tracks, but with enough visual differences that show that this is outdated content. Through sizing and maybe color?

This issue is just a reminder to down the line consider adding more options of icons or thumbnails to links related to a video. Some discussed options are:

• Use mini coding train characters
• Video thumbnails
• Images

This is originally mentioned in #63 and #65

This page has not been created yet. Some base designs can be found in Figma (Visual Designs > Working Designs). Content can be left for later, this can focus on layout and needed components.

The following is a general list of sections that summarizes this page structure. Feel free to add specific components that require specific attention or branch into other issues.

• Header and main description
• Section banner
• Collapsible question rows
• Mobile device version

From Dana's Feedback

• All aboard container. I would suggest to add the horizontal light lines.
• All aboard container. I would suggest to align the text “welcome to the coding train with…” in the way that we had it set in our website. (more to the left)
• About page: I think the main text should be in the same typeface that we have for header text. The “now that you met gloria” can stay in the monospace.. maybe?
• Text in general: Line height and text size seems to vary in different pages, I would suggest to follow the tracks page for line height, size and color.
• Text in general: 15 px
• Text in general: Dark grey (If it doesn’t create issues with accessibility, I think it look better with the rest of the colors)

From Fernando's Review

• #131
• Guide card layout is off
• Challenge card layout in homepage
• Buttons animate on resize too
• Issues in top bar menu in screen sizes.

From lighthouse report

• Color contrast
• Performance in certain pages

Dan

• #129
• #130
• #132

This issue serves as the main summary reference that holds a list of TO-DOs for big sections or pages in The Coding Train site. It also holds references to internal and external references that relate to the project.

References

• Current The Coding Train site
• Current content repo for site
• Wireframes Figma file
• Data Taxonomy
• Current visual designs

Language

To be completed by Coding Train team

• #56
• #72

Content

To be completed by Coding Train team

• #88
• #87
• #128
• #131
• #122
• #50
• #51
• #55
• #77
• #92
• #79
• #80

Pages

To be completed by DSI team

• #44
• #121
• #112
• #111
• #84
• #27
• #29
• #31
• Create tag element in back-end for topics and languages
• #26
• #28
• #30
• #109
• #76

Other functionality

To be completed by both DSI team and Coding train team

• #78
• #85
• #120
• Content structure guide for Coding Train Team
• #61
• #57
• #63
• MD/MDX guide loading and page creation
• #46
• Add share video functionality

After launch

• #52
• #69
• Time of day changes on homepage scene
• Sorting tracks
• Sorting challenges
• Showing multiple featured challenges in challenges/
• Passenger Showcase/Contributions gallery
• #81
• #86

This is thanks to @elizabethslash! Still open for discussion!

• Tracks -- full on courses / sequenced playlists of many videos (Code!, Nature of Code, GitHub, Machine Learning, to name a few) Removing the term "main" (although we can use it behind the scenes if that's helpful).
• Side Tracks -- arbitrary collections of videos themed around a given topic. And maybe some shorter sequences of videos (no more than 5, otherwise it's a track?)
• Journeys -- individual project videos, formerly known as challenges.

Thoughts and ideas welcome!

Hello! We’ve been reviewing what’s left for the site on the development side before a first launch, and the homepage is the main item that was still a bit unresolved.

We went back and reviewed the homepage designs and with some small adjustments we are really happy with this layout. You can see the design below. For the first header background and character illustration (All Aboard), we just put a placeholder illustration, but we would love to have Jason create something for it.

@shiffman we would greatly appreciate for you to check it out and point out anything that stands out to you for us to review, so that we can start developing it with code. After this the specific text content can be also worked on.

I was poking around the site when thinking about #90 and noticed that some of the paths for videos on the tracks are especially verbose and seem to nest themselves? Here are some examples:

https://thecodingtrain.netlify.app/tracks/code-programming-with-p5-js/tracks/main-tracks/code/intro/code-programming-with-p5-js-introduction
https://thecodingtrain.netlify.app/tracks/the-nature-of-code-2/tracks/main-tracks/nature-code-2/1-vectors/1-what-is-a-vector

I believe the should something like?

https://thecodingtrain.netlify.app/tracks/the-nature-of-code-2/1-vectors/1-what-is-a-vector
or
https://thecodingtrain.netlify.app/main-tracks/nature-code-2/1-vectors/1-what-is-a-vector

Apologies if this is fixed in a different branch I'm looking at main.

I noticed that some of the buttons on the website don't have descriptive language that, from what I understand, is best practices for accessibility. Here is some context: https://webaccess.berkeley.edu/ask-pecan/click-here

In addition, some "check it out now" text is not a link (and can probably be removed). I haven't done a full accounting of every button and link just starting by bringing this up for discussion. Here are some examples from the homepage:

I'm having trouble adding images to the passenger showcase and maintenance guides. With the syntax ![Alt text](./path/to/image) only the alt text is shown.