Bermarte: Asynchronous-programming

[bermarte]

module repository

Suggested Study

expand/collapse

Closure & Callstack

• this and () => {}
• tyler mcginnis
• dario garcia moya
• youtube search

The Event Loop

• Loupe (+10)
• In the Loop (+10)
• MDN
• flavicops
• javascript.info/settimeout-setinterval
• https://javascript.info/event-loop
• Use case for using setTimeout(0)
• Beau from FCC (timeouts & intervals)

Callbacks, Promises, Async

• References
• Coding Train
• - Dev Ed
• Traversy
• javascript.info
• MDN: Promises, Using Promises
• HYF ... AMS, CPH
• Async/Await - FunFunFunction
• return await (advanced)
• Practice
• learn-promises
• promise-practice
  • JS 30:
• Whack-a-Mole
• Slide in on Scroll
• Countdown Timer
• JS & CSS Clock
• Webcam Fun

APIs

• What is JSON?
• APIs 101
• How do they work?
• Like a Restaurant
• DevTools, the Network Tab:
• chrome/ium
• firefox
• What is RESTful
• JSON Placeholder:live, more docs
• restfulapi.net
• Coding Train
• what is CORS?

fetch

• References
• Javascript Promises and Fetch for beginners
• javascript.info/fetch
• Traversy
• Coding Train
• Fetch API Introduction
• Learn Fetch API
• Async/Await Javascript and Promises - Fetch API vs Axios
• MDN
• this-to-fetch
• Practice
• learn-fetch
• real-world-fetch
• github-api-crash-course tutorial. (hint: avoid pushing your GitHub auth token!)
• Fetching REST
• JS 30: Type Ahead

Node.js

• node-fetch
• fs
• utils.promisify
• Mosh: Node.js in 1 Hour
• Friendly Node.js fs guide
• Node.js examples to study
• learnyounode through MAKE IT MODULAR

Other

take your frontend skills above and beyond:

• client-side-routing
• learn-component-architecture

---

Week 1

• Sunday Prep

• Sunday Class

Project

• repo (with a complete README)
• live demo
• Planning
  • Backlog
  • Development Strategy
• Implementation
  • ES Modules (import/export)
  • at least one class
  • at least one setTimeout and one setInterval
  • Logs of each user interaction

Check-In

Progress

• Worked a bit more on the previous assignment
• watching tutorials
  Blocked
  - closure
  Next Steps
• understand closure
• working on the exercises
• working on the project
  Tip(s) of the week
  I forgot how to Strikethrough with GitHub Markdown ~~text~~

---

Week 2

• Sunday Prep

• Sunday Class

Project

• repo (with a complete README)
• live demo
• Planning
  • Backlog
  • Development Strategy
  • Project board
• Implementation
  • ES Modules (import/export)
  • at least one class
  • at least one call to the GitHub API
  • Logs of each user interaction

Check-In

Progress

• Completed the previous assignment
  Blocked
  Next Steps
• Working on the previous project
• Working on the project of the week
• Maybe working on the exercises
  Tip(s) of the week

---

Week 3

• Sunday Prep

• Sunday Class

Project

group project

Check-In

Progress

• Completed the previous assignment
• Checked Heroku
  Blocked
  Next Steps
• Working on the group assignment
  Tip(s) of the week
• https://www.youtube.com/watch?v=EHP7rAsKBdU Deploy Your React App To Heroku
• https://www.youtube.com/watch?v=44NTs9R94do&t=333s How to Deploy a JSON API to Heroku
• https://www.youtube.com/watch?v=1zkgdLZEdwM Create a Fake REST API with JSON-Server

[colevandersWands]

@bermarte , do you have any specific questions about closure that I could help with?

[bermarte]

@colevandersWands I see I have problems understanding http://localhost:4010/isolate/00-closure/2-closing-parameters/exercise-3.js

[bermarte]

@bramdevries and @ThibaultLesuisse I am not satisfied with the code, but I want to go a little further with my pomofocus. Anyway, I'll create a new simplified one from scratch and rewrite it without using global variables.

[bramdevries]

That's totally fine! Refactoring based on new things you've learned is a part of the development process!

[colevandersWands]

@bermarte, I just noticed I missed your mention about closure. How are you doing with that? Do you still have questions about it?

[bermarte]

@colevandersWands thanks, I think I will come back to the subject in the future, to understand it better. Bram gave an example of calling a function inside a function (something like fun(arg1)(arg2))) which is interesting. I don't know what the name of that concept is. Then I was wondering how to call a method inside a method in a class.

[colevandersWands]

methods inside methods and functions inside functions work differently even if they look the same. putting that aside for now isn't a bad idea

[bramdevries]

Really nice job with the portfolio. It looks really modern and I like the small animations!

• Your Repo class currently handles the loading of all the repositories that you want. A class should be as small as possible, in this case a single repository.
• Nice job on already using async/await syntax for this project.
• Your data fetching code is currently modifying the global repos variable. This will have the side-effect that if you ever call repo.getRepos a second or third time you'll have the same repositories included twice.
• On your projects section you're filtering the list of projects to a certain selection. But what would happen if you started creating more repositories and the ones you want to display are no longer returned because GitHub's API paginates the list of repositories? Since you already know the names of the repositories you want to include you could also use this endpoint to retrieve them individually. This is also a good way to experiment a bit with concurrent requests using Promise.all

[bermarte]

@bramdevries Thank you, Bram, I appreciate your feedback. I will refactor it following your input.