Sign in

Journey to Senior Full Stack Engineer (Day 1)

As a web developer working at a consulting firm, I am relearning from the ground up again in order to become a Senior Full Stack Engineer in the next 6 months.

Learning Path for the next 3 months

  • Build projects (Min. 6 days out of 7) — HTML, CSS, JS, React, Redux, React Native, Node.js, Express, Restful API, GraphQL, Relational DB, Mongo DB, AWS.
  • Frontend Masters — Beginner, Professional, Expert, CSS, JS, Async JS, WebPacks, React, Computer Science, Full Stack, Node, Design To Code, Data Visualization
  • FreeCodeCamp — Responsive Web Design, JS, Frontend Libraries (except for Bootstrap & JQuery), Data Visualization, APIs and Mirco Services, Quality Assurance.
  • Algorithms and Data structure — When studying computer science course: Cracking the coding interview, 2 Leet Code challenges per day

Custom HTML Elements Attributes

  • If you want to create custom attributes for HTML elements, you must prefix it with data-{value}.
  • Ex: <div data-key=”1”></div>

Document & Events

  • Document is an interface that represents a webpage loaded into a browser (Also known as the DOM).

Keyboard Events

  • keydown — An event is fired when a key is pressed down. Unlike a keypress event, the keydown event is triggered even if it does not produce a character value. Ex: ALT, CTRL, Shift, Meta will still trigger an event.
  • keydown Example: document.addEventListener(‘keydown’, function);
  • keyup — An event is fired when a key is released. Similar to keydown, an event will be triggered even if it does not produce a character value.
  • keyup Example: document.addEventListener(‘keyup’, function);

Keyboard Events Properties

  • code — DOMString value of the key pressed. Ex: KeyA, KeyB, etc
  • key — The actual value/character of the key pressed. Ex: a, b, 1, etc
  • keyCode — (Deprecated: Use key) A number representing the key pressed. Ex: A = 65, S = 83, etc
  • repeat — Boolean value; True if the key is held down
  • altKey & ctrlKey — Boolean value; True if either key is pressed.

querySelectorAll(Selectors)

  • Returns a static NodeList that matches the group of selectors.
  • Can match for multiple selectors. document.querySelectorAll(“div.alert, div.note”); In this example, it will return a list of all DIV elements that has the class name of “alert” or “note”.
  • Can specify elements with specific attribute values. document.querySelectorAll(“[data-key=1]”); In this example, it will return a list of all elements with the attribute name “data-key” and a value of “1”.
  • Can search for children elements. document.querySelectorAll(“div.highlighted > p”); In this example, it will return a list of all P elements that are a direct descendants of DIV elements that have the class name of “highlighted”.
  • Normally, the query selector will only verify the last element in the selector. EX: document.querySelectorAll(‘.outer .inner’); In this example, the “inner” element will still return even though it is not a direct descendant of “outer”. To fix this scoping issue: document.querySelectorAll(‘:scope .outer .inner’);