Here, I'd be itemizing, in bullets, new concepts I come across as I traverse the course.
keydown
event- HTML
data-*
Global Attribute HTMLMediaElement.play()
methodHTMLMediaElement.currentTime
property. In fact, theHTMLMediaElement
DOM interfacetransitionend
DOM event
- CSS
transform-origin
property - DOM
setInterval()
method
- CSS variables can be updated with javascript
- HTML
<input type="range">
- CSS variables
.dataset
javascript property from setdata-*
in HTML- DOM
document.documentElement
- CSS
CSSStyleDeclaration.setProperty
console.table
overconsole.log
for Arrays and Objects- Using
Array.prototype.reduce
to count instances of values (from an array) in an object
- Flexbox (take the flexbox.io tutorial)
- CSS
transform
property is awesome - DOM
element.classList.toggle()
fetch()
API- Regex
- DOM
keyup
event - DOM
change
event
Array.prototype.some()
Array.prototype.every()
Array.prototype.find()
Array.prototype.findIndex()
Array.prototype.splice()
- HTML Canvas -- the entire thing is foreign
- DOM Canvas API
mousemove
eventmousedown
eventmouseup
eventmouseout
event- HSL (mothereffinghsl)
- flag in javascript
- Add a breakpoint on attribute modification in dev tools to see which javascript functions are modifying an element
%s
==> for string interpolation%c
==> for stylingconsole.warn()
console.error()
console.info()
console.assert()
console.clear()
console.dir()
console.group()
...console.groupEnd()
, orconsole.groupCollasped()
...console.groupEnd()
console.count()
console.time()
...console.timeEnd()
console.table()
- DOM
KeyboardEvent.key
property
- HTML5 Video -- brush up on this.
- DOM
timeupdate
event
- Using negative values in the
Array.splice()
prototype.
- 'debounce' function calls for performance improvement. (There's also 'throttle', too).
- The
window
DOM object HTMLElement.offsetTop
propertywindow.scroll*
window.innerHeight
-
For making a copy of arrays, not referencing, use any of:
Array.from()
Array.slice()
[...array]
- spread.Array.concat()
-
For making a copy (shallow copy) of object, not referencing, use any of:
Object.assign()
{...object}
- object spread (introduced ES2018)
-
For making deep copy:
- lodash's
_cloneDeep()
- "Poor man's deep clone" - JSON.parse(JSON.stringify(obj))
- lodash's
-
localStorage
localStorage.setItem()
localStorage.getItem()
-
JSON.stringify()
-
JSON.parse()
-
HTMLFormElement.reset()
-
Event delegation -- Very responsible parents with very negligent children. :)
-
DOM's
Element.matches()
method -
DOM's
Event.preventDefault()
method
- Object destructuring
- Quick tip:
this
=> the element that you listened on.event.target
=> the element that the event got triggered on.
- DOM's
MouseEvent.offsetX
- DOM's
MouseEvent.offsetY
Array.sort
- Regex, fucking learn Regex, Kay!
Array.map()
can be chained multiple times together. I.e.
array.map(someAwesomeFunction).map(anotherAwesomeFunction).map(theAwesomest);
- Browsersync
- DOM's
Navigator
interface - DOM's
MediaDevices
interface - DOM's
URL
interface - DOM's
createObjectURL()
method - DOM's
Node.insertBefore()
method - DOM's
Node.firstChild
property canplay
event
- HTML's
contenteditable
attribute - DOM's Web Speech API
- DOM's
SpeechRecognition
interface - Web Speech API's
result
event - Web Speech API's
end
event
- DOM's Geolocation API
- DOM's
Geolocation.watchPosition()
method
- DOM's
ParentNode.append()
method - DOM's
Element.getBoundingClientRect()
method Window.scrollX
,Window.scrollY
properties
- DOM's
SpeechSynthesisUterance
interface - DOM's
SpeechSynthesis
interface - DOM's
SpeechSynthesisVoice
interface - DOM's Web Speech API's
voiceschanged
event
HTMLElement.offsetHeight
property- DOM's
scroll
event - CSS transition can occur on
max-width
but notwidth
- Tip: Target a parent element and manipulate its children's styles based on the parent.
- Here's an idea of what happens when an event is fired in the browser:
- the browser captures the event from the top of the "Tree" down to the element where the event was triggered on, then
- the action attached to the fired event is triggered on every element from the element it was triggered on, to the top of the "Tree".
- Simply put, when an event is fired, two things happen => Event Capture, and Event Bubbling.
- The DOM's
Event.stopPropagation()
method can be used to stop further propagation of the action attached to the event in either the capture, or the bubbling phase. - When listening for events on elements using the
Element.addEventListener()
method, options can be passed in to control event capturing and even something known as "Event Once" as thus:
element.addEventListener('event', functionToRun, {
capture: true,
once: true
});
- Passing in
once
removes the event listener from the element in theElement.removeEventListener()
fashion immediately the event is triggered once.
- DOM's
element.classList
methods (add
,remove
,toggle
, etc) - Shortcircuiting with
&&
and||
MouseEvent.pageX
HTMLElement.offsetLeft
element.scrollLeft
- DOM's
HTMLMediaElement.playbackRate
property
-
Date.now() => Current timestamp in milliseconds
-
Pop variables into object when console.loging like so:
const firstName = 'Kizito'; const lastName = 'Akhilome'; console.log({firstName, lastName});
-
Select form elements by selecting their name attributes
-
DOM's
clearInterval()
method -
The page's title tag can be updated like so =>
document.title = 'new value';
-
new Date(timestamp)
-
Date.prototype
- DOM's
Event.isTrusted
property - DOM's
Node.parentElement
property