Skip to content
This repository has been archived by the owner on Oct 11, 2019. It is now read-only.

Latest commit

 

History

History
72 lines (68 loc) · 4.4 KB

readme.md

File metadata and controls

72 lines (68 loc) · 4.4 KB
Raw

🤓 Intro

While my initial focus is on bettering my understanding of (front-end) JS (and consequentially honing my skills), at the same time I'm also interested in applying my Git learning. So, this is my first bite at it, at GitHub and at Markdown.

🌠 Objectives

  • Start 👍
  • Getting Started: 9/30 projects done by 30/05 27/05 🥉💪
  • Halfway there: 15/30 projects done by 2/06 31/05 🥈💪
  • Finish all the mini-projects by 10/06 🥇🎉
  • Stretch Goal: Finish by 7/06 🏆🔥

❗️️ ️Update

Due to time constraints and (positive) change of circumstances, I decided to:

  1. Postpone the remaining objectives ✅
  2. Do projects I deem worthy by 01/06 ✅

✍️ Notes

Included below are links to bullet points of new stuff I learned from each project. (WIP)

  1. Drum Kit ✅
    • data-{whatever}: Create user-defined attributes
    • transitionend event: Fired when a CSS transition has completed
    • classList: Returns all classes attached to element
    • <audio>: audio.currentTime and audio.play()
  2. JS and CSS Clock ✅
    • selector.style.cssAttribute = value: Directly set cssAttribute's value
    • A method cannot be passed as a parameter in JS
  3. CSS Variables ✅
    • CSS Variables: --varName: value; (Declaration) and var(--varName); (Usage)
    • The diff between NodeList and Array: More methods
    • Short-circuit evaluation
    • Document.documentElement: Always returns <html> element
  4. Array Cardio Day 1 ✅
    • One-liner arrow functions have an implicit return
    • ⚠️ Always put an initial value in a reduce function: to avoid headaches
  5. Flex Panel Gallery ✅
    • The this you're thinking of should probably be inside a regular function
  6. Type Ahead ✅
    • The spread operator ...: spreads over an iterable object (i.e: string, array and object)
  7. Array Cardio Day 2 ✅
    • every is the opposite of some
  8. Fun with HTML5 Canvas ✅
    • HSL: 60 Young Guys Can Be Messy Rascals
  9. Dev Tools Domination ✅
  10. Hold Shift and Checkboxes ✅
    • This is was so far the most frustrating exercise
  11. Custom Video Player ✅
    • This was by far the most fun exercise ! Read the code.
  12. Key Sequence Detection ✅
  13. Slide in on Scroll ✅
  14. reference VS Copying ✅
    • JS is pass-by-value. Mostly.
  15. LocalStorage ✅
    • Basically there are two main methods:
      • localStorage.setItem(): adds item to localStorage
      • localStorage.getItem(): gets item from localStorage
  16. Mouse Move Shadow
  17. Sort Without Articles
  18. Adding Up Times with Reduce
  19. Webcam Fun
  20. Speech Detection
  21. Geolocation
  22. Follow Along Link Highlighter
  23. Speech Synthesis
  24. Sticky Nav
  25. Event Capture, Propagation, Bubbling and Once ✅
    • Event capture: The browser reads the doc from top to bottom
    • Propagation == Bubbling: The event bubbles up, it propagates
  26. Stripe Follow Along Nav
  27. Click and Drag
  28. Video Speed Controller
  29. Countdown Timer
  30. Whack A Mole