search

kottans / frontend

:octocat: Kottans frontend course 🎓
https://kottans.org/frontend/
MIT License
1.23k stars 361 forks source link

Add links to related youtube casting #276

Closed OleksiyRudenko closed 5 years ago

OleksiyRudenko commented 5 years ago

Some tasks were highlighted during the offline part of the course in 2019. It might be of great help for the self-learners if these tasks/modules contained direct links to relevant clips from Frontend 2019 playlist

Other playlist to consider as a source:

Each fragment might be a screenshot (frame) from the video linked to a video per se.

Skills to have to accomplish:

OleksiyRudenko commented 5 years ago

Perhaps we need a set of covers published somewhere along for easier access. kottans/artifacts seems to be an appropriate place to store cover images.

Linked issue

zonzujiro commented 5 years ago

In artifacts we should place template of cover image, not all cover images itself.

yevhenorlov commented 5 years ago

I have a title-to-url map of youtube thumbnails, to avoid uploading images to the repo we can use urls instead.

Will do a PR later today

OleksiyRudenko commented 5 years ago

How about just posting the map here? Let contributor use it. PR may stay stall for quite a time.

We'd expect thumbnails be of medium quality (320*180).

A link to the relevant reference material just for the record and possible future reference: https://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api

yevhenorlov commented 5 years ago

@OleksiyRudenko yep, good point. here it is

const thumbnailTitleUrlMap = {
  'Kottans Frontend 2019 [190202] - Star Wars App (1/2)':
    'https://i.ytimg.com/vi/2Z__VqJZbXg/mqdefault.jpg',
  'Kottans Frontend 2019 [190202] - Star Wars App (2/2)':
    'https://i.ytimg.com/vi/we4EIK20ZGY/mqdefault.jpg',
  'Kottans Frontend 2019 [190202] - Tiny JS World retro':
    'https://i.ytimg.com/vi/htPKnToX7zY/mqdefault.jpg',
  'Kottans Frontend 2019 [190202] - TJSW with es6 classes retro':
    'https://i.ytimg.com/vi/gB5MUfRp1A4/mqdefault.jpg',
  'Kottans Frontend 2019 - Dev Tooling 1/2':
    'https://i.ytimg.com/vi/ItpdpF_8ZEs/mqdefault.jpg',
  'Kottans Frontend 2019 - Dev Tooling 2/2':
    'https://i.ytimg.com/vi/q7kboSaNeZc/mqdefault.jpg',
  'Kottans Frontend 2019 - Build Tools':
    'https://i.ytimg.com/vi/VpyyN_VwxOo/mqdefault.jpg',
  'Kottans Frontend 2019 - HTML5 Form 1/2':
    'https://i.ytimg.com/vi/4MYA3Nocsts/mqdefault.jpg',
  'Kottans Frontend 2019 - HTML5 Form 2/2':
    'https://i.ytimg.com/vi/ZoC759dIObM/mqdefault.jpg',
  'HTML5 Form p.2 (Oleksandr Ostrovnyy) | Kottans Frontend 2019':
    'https://i.ytimg.com/vi/eTCGaUILyzg/mqdefault.jpg',
  'Applications p.1 (Anastasiya Mashoshyna) | Kottans Frontend 2019':
    'https://i.ytimg.com/vi/2uSRrXEHfc8/mqdefault.jpg',
  'Applications p.2 (Anastasiya Mashoshyna) | Kottans Frontend 2019':
    'https://i.ytimg.com/vi/kLt2jX1UX_M/mqdefault.jpg',
  'Organizational: Problem Solving (Oleksiy Rudenko) | Kottans Frontend 2019':
    'https://i.ytimg.com/vi/R-ILHT5SfDI/mqdefault.jpg',
  'HTML5 Form Wrap Up (Oleksandr Ostrovnyy) | Kottans Frontend 2019':
    'https://i.ytimg.com/vi/NRCvOcEuDEU/mqdefault.jpg',
  'WebApp - Design Patterns (Oleksiy Rudenko) | Kottans':
    'https://i.ytimg.com/vi/NQ6xHcQuQe4/mqdefault.jpg',
  'Weather App (p.1) - Oleksiy Rudenko | Kottans Frontend 2019':
    'https://i.ytimg.com/vi/FcPx2AC77DQ/mqdefault.jpg',
  'Weather App (p.1 continued) - Oleksiy Rudenko | Kottans Frontend 2019':
    'https://i.ytimg.com/vi/CSpnXeaBomE/mqdefault.jpg',
  'Weather App (p.1 Retro) - Oleksiy Rudenko et al | Kottans Frontend 2019':
    'https://i.ytimg.com/vi/o1L0DvcqmDU/mqdefault.jpg',
  'Weather App (p.2) State Management - Oleksiy Rudenko | Kottans Frontend 2019':
    'https://i.ytimg.com/vi/TC0ROTuYAlo/mqdefault.jpg',
  'Improving Component Rendering (p.1) -  Oleksiy Rudenko  | Kottans Frontend 2019':
    'https://i.ytimg.com/vi/EDzPXul5teA/mqdefault.jpg',
  'Improving Component Rendering (p.2) - Oleksiy Rudenko | Kottans Frontend 2019':
    'https://i.ytimg.com/vi/z9spriQGo5M/mqdefault.jpg',
  'Routing Intro - Christina Landvytovych | Kottans Frontend 2019':
    'https://i.ytimg.com/vi/UKjbmvl4WQU/mqdefault.jpg',
  'Routing Workshop - Mykhailo Hanol | Kottans Frontend 2019':
    'https://i.ytimg.com/vi/VvbL9HEZpjY/mqdefault.jpg',
  'ReactJS - Intro (p.1) | Anastasiya Mashoshyna | Kottans Frontend 2019':
    'https://i.ytimg.com/vi/DjsWUFVbwgM/mqdefault.jpg',
  'ReactJS - Intro (p.2) | Ivan Titarenko | Kottans Frontend 2019':
    'https://i.ytimg.com/vi/yp5Ndd_7NPM/mqdefault.jpg',
  'ReactJS - Intro (p.3) | Ivan Titarenko | Kottans Frontend 2019':
    'https://i.ytimg.com/vi/3i04Um6UGGI/mqdefault.jpg',
  'ReactJS - Intro (p.4) | Yevhen Orlov | Kottans Frontend 2019':
    'https://i.ytimg.com/vi/bvh3n0MJyMY/mqdefault.jpg',
  'Performance - Svyatoslav Shmatko | Kottans Frontend 2019':
    'https://i.ytimg.com/vi/QbJiXDYISKo/mqdefault.jpg',
  'How to win and make an impact - Svyatoslav Shmatko | Kottans Frontend 2019':
    'https://i.ytimg.com/vi/d_5NWZ77nEk/mqdefault.jpg',
  'Websockets: что такое вебсокеты и как они работают? Часть 1':
    'https://i.ytimg.com/vi/QagWmnZBPKM/mqdefault.jpg',
  'Websockets: создание чата на JavaScript. Часть 2':
    'https://i.ytimg.com/vi/3o-WUUuSaKM/mqdefault.jpg',
  'Websockets: создание чата на JavaScript. Часть 3':
    'https://i.ytimg.com/vi/FvkE8iqwufM/mqdefault.jpg',
  'Asynchronous JavaScript, part 1 - Yevhen Orlov | Kottans Frontend 2019':
    'https://i.ytimg.com/vi/8N1LO5o9pCc/mqdefault.jpg',
  'Asynchronous JavaScript, part 2 - Yevhen Orlov | Kottans Frontend 2019':
    'https://i.ytimg.com/vi/Drc6kQnEO2A/mqdefault.jpg',
  'Canvas API - Roman Liutikov | Kottans Frontend 2019':
    'https://i.ytimg.com/vi/WeVSqhK-hqI/mqdefault.jpg',
  'Websockets: создание чата на JavaScript. Часть 4 - Alexander Kochetov | Kottans Frontend 2019':
    'https://i.ytimg.com/vi/nJjVft2FzYo/mqdefault.jpg',
  'Websockets: создание чата на JavaScript. Часть 5 - Alexander Kochetov | Kottans Frontend 2019':
    'https://i.ytimg.com/vi/EpFN56MqG64/mqdefault.jpg',
  'Intro to Web Animation - Khrystyna Landvytovych | Kottans Frontend 2019':
    'https://i.ytimg.com/vi/b8Ukt7b1lFE/mqdefault.jpg',
  'Redux Intro - Anastasiya Mashoshyna | Kottans Frontend 2019':
    'https://i.ytimg.com/vi/a2hIorjh4-E/mqdefault.jpg',
  'Redux Workshop - Ivan Tytarenko, 1/3 | Kottans Frontend 2019':
    'https://i.ytimg.com/vi/REdwOSEH55I/mqdefault.jpg',
  'Redux workshop - Ivan Titarenko 2/3 | Kottans Frontend 2019':
    'https://i.ytimg.com/vi/XCNx8l09ri0/mqdefault.jpg',
  'Redux workshop - Ivan Titarenko 3/3 | Kottans Frontend 2019':
    'https://i.ytimg.com/vi/g_flqMyB4t4/mqdefault.jpg'
}

in case it ever needs to be updated, here's the script.

nazmariam commented 5 years ago

Hi! Could I add links to related YouTube casting?

OleksiyRudenko commented 5 years ago

@nazmariam sure. All yours!

OleksiyRudenko commented 5 years ago

@nazmariam I'd suggest that we first have any one module with a video preview and link in PR. This would allow us to align the overall view, location within the file etc. and save your efforts. Once aligned you will complete other modules + videos having better and aligned guidelines.

nazmariam commented 5 years ago

Ok! Got it.