wesbos / wes-bos-captions

Captions for my video courses

Captions

This is a Github Repo containing all the captions for my video courses. Edits are very welcome as the transcribers who create these aren't 100% perfect.

RFB → React For Beginners

ES6 → ES6 for Everyone

JS3 → JavaScript30

NODE → Learn Node

GRID → CSS Grid.io

WTF → Flexbox.io

ARG → Advanced React

BJS → Beginner JavaScript

GAT → Master Gatsby

Translations

Translations are welcome - just append the language code to the file name. Example:

• English: 04 - Temporal Dead Zone.vtt
• Portuguese (Brazil): 04 - Temporal Dead Zone-pt-BR.vtt

wes-bos-captions's Issues

Wrong subtitles

Actually the subtitles are changed.
The Speech recognition video has the Geolocation subtitle and the Geolocation video has the Speech recognition subtitle.

I don't know if there is something related, but in the website, the video numbers are:

• 20 => Native speech recognition
• 21 => Geolocation based Speedometer and Compass

And in the repo it's missing the 19 and we have 21 repeated.

Filenames non-MS friendly :(

Tried to clone the repo at home (Windows 10, sorry 😳) to start my es-ES translations, but couldn't create these four files because they include a ? in their filename:

• ES/05 - Is Var Dead? What should I user?.txt
• ES/05 - Is Var Dead? What should I user?.vtt
• ES/58 - What are Proxies?.txt
• ES/58 - What are Proxies?.vtt

JavaScript Drum Kit - WAV files not working in Firefox

Audio files from JavaScript Drum Kit do not work in Firefox apart from kick.wav:

Media resource file:///C:/Users/developer/PhpstormProjects/untitled/sounds/clap.wav could not be decoded. index.html
Media resource file:///C:/Users/developer/PhpstormProjects/untitled/sounds/hihat.wav could not be decoded. index.html
Media resource file:///C:/Users/developer/PhpstormProjects/untitled/sounds/openhat.wav could not be decoded. index.html
Media resource file:///C:/Users/developer/PhpstormProjects/untitled/sounds/boom.wav could not be decoded. index.html
Media resource file:///C:/Users/developer/PhpstormProjects/untitled/sounds/ride.wav could not be decoded. index.html
Media resource file:///C:/Users/developer/PhpstormProjects/untitled/sounds/snare.wav could not be decoded. index.html
Media resource file:///C:/Users/developer/PhpstormProjects/untitled/sounds/tom.wav could not be decoded. index.html
Media resource file:///C:/Users/developer/PhpstormProjects/untitled/sounds/tink.wav could not be decoded.

Captions for episodes (67,68,69,70,71,72,73,74,75,76,77)

Hello @wesbos ,

His courses are fantastic, and the didactics wonderful, congratulations for the excellent work.

The course ES6 for Everyone received some updates, specifically two new blocks:

• Async + Await Flow Control
• ES7, ES8 + Beyond

But the repository of captions related to video lessons has not been updated, there are only captions to the Map and Weak Map video block.

Did the new added blocks get captions too? Do the captions for the episodes (67,68,69,70,71,72,73,74,75,76,77) have any predictions of when the captions will be sent to the repository?

GAT course missing a few files

pull them from Rev.com

2 minute gap in episode 10 of 'Learn Node'

There seems to be a 2 minute gap in episode 10, here's a snippet from the subtitle file showing the gap

00:01:41.780 --> 00:01:44.034 line:100% position:50% align:middle
and we'll have our block content.

00:03:54.400 --> 00:03:58.530 line:100% position:50% align:middle
Some HTML that needs to be displayed onto
the page. So that's what we're going to

Should prove to be a good first issue for any contributors looking to help out.

Captions are missing in RFB #24 video- streaming from browser

Am going through the React for Beginners course, all the videos have been captioned up to 24, For #24 there isn't a caption button so can't turn on captions. #25 is captioned so somehow 24 got missed? I see that there is a caption file for this video listed in the GitHub repo.

Thanks

• a grateful viewer.

RFB captions are not updated.

The RFB captions do not match the latest react for beginners courses.

javascript Drum

hey I just found one issue in Drums: if we hold down the key for a while, playing class is been not removed

Some captions are out of sync for episode 10 of Node

After 00:09:18, the captions go out of sync, many of the captions show up after already being said in the video, then sync up for a second, then go back to being late.

Captions not matched the all videos of RFB (captions are outdated)

Please match captions to all videos of RFB. I think, these captions are outdated

The video cannot be loaded JS30

Hi, I am using Chrome. It used to work, recently 3 weeks, It seems always not working.
I couldn't see the video.
It alerts: https://player.vimeo.com/video/194130650?byline=false&autoplay=false&portrait=false&speed=true&title=false&show_vimeo_logo=false

with a grey screen.

Captions doesn’t match with content in BJS/05 - Code Quality…

Captions seems to be off topic after 02:09 in 05 - Code Quality Tooling with Prettier and ESLint and it makes the course video difficult to follow.

Text between 51 (203) and 52 (207) and rest of the video is lost, or out of sync. I watched till 08:58 before I asked someone to verify that captions is off topic. Which it is.

Wes-Bos-Captions/BJS/05 - Code Quality Tooling with Prettier and ESLint.vtt

Lines 203 to 209 in bee03b4

	51
	00:02:05.830 --> 00:02:09.840
	And if I just say like const age is equal to a hundred and..
	52
	00:02:11.123 --> 00:02:15.683
	First here it's saying unexpected token age, why is that?

Automatically deploy changes to Vimeo

Right now these changes have to be manually sync'd to vimeo.

I have a script I cobbled together that will push them up to vimeo, but its not automatic.

What I would like is that anytime a file changes, we push that to vimeo so the updated captions are up there.

This would require that we put the video ID in the title, or some sort of metadata.

Also I would like to do this with translated captions as well.

Not an immediate need, but something to think about @lfades

const Vimeo = require('vimeo').Vimeo;
const axios = require('axios');

const lib = new Vimeo(
  'nah',
  'nah',
  'nahhhhhhh'
);

const fs = require('fs');

const videoData = require('../../../Sites/bosmonster/site/data/videos-JS3');

const videos = videoData.videos.filter(video => video.caption).map(video => {
  video.texttrack = fs.readFileSync(`../../Wes-Bos-Captions/${video.caption}`);
  return video;
});

function uploadCaption(video) {
  return new Promise((resolve, reject) => {
    const path = `/videos/${video.id}/texttracks`;
    lib.request(
      {
        method: 'POST',
        path,
        query: {
          type: 'captions',
          language: 'en',
          name: `${video.title} Captions`,
        },
      },
      (err, body) => {
        axios
          .put(body.link, video.texttrack)
          .then(res => {
            resolve(`Finished ${video.title}`)
          })
          .catch(err => {
            reject(`error on video ${video.id}`)
            console.log(err);
          });
      }
    );
  });
}

let i = 1;

async function go() {
  const video = videos[i];
  console.log(`Starting ${video.title}`);
  const res = await uploadCaption(video);
  console.log(res);
  i++;
  if (videos[i]) {
    go();
  }
}

go().catch(console.error);

@lfades

No captions in Learn Node

Hello, I'm watching your videos through your platform (courses.wesbos.com) and at the moment, the first 3 videos of learn node, have no subtitles.
Any idea whats happening @wesbos ? Clicking in the [cc] icon does nothing.

Thanks.

Meaning of Pay it forward

@wesbos you could explain to me the meaning of "Pay it Forward" that you said in first ep of CSS Grid?

Javascript Drum Kit - (Key release delay problem)

Here in the given solution, if I press and hold a key for some seconds and then release it, the box shadow is not being removed.