11/15/2016 - 7:52 AM

[checklist] - Online courses

[checklist] - Online courses

“Computer Science is basically the science of tradeoffs.” — Brian Holt

Big O

  • nested loop, n^2
function find(needle, haystack) {
    for (var i = 0; i < haystack.length; i++) {
        if (haystack[i] === needle) return true;

// Still O(n). Unless we say otherwise, we're assuming worst case scenario. In this worst case, the needle would be the last element.

function makeTuples(input) {
    var answer = [];
    for (var i = 0; i < input.length; i++) {
        for (var j = 0; j < input.length; j++) {
            answer.push([input[i], input[j]]);
    return answer;
// This would be O(n²). For every input, we have to go through a full loop inside of another full loop, meaning we're doing a lot of work! This is the trick: look for loops.


  • Always favor readibility over cleverness
  • Recursion

Recursion is when you define something in terms of itself. Has anyone ever used the word you wanted defined in the definition that they gave you? "What is a computer?" "It's something that computes things." This would be a recursive definition.

  • Know when to use recursion.
  • Fibonacci & Factorial in recursion.
  • Tips: How to write Jasmine test in Codepen
  • Tips: How to output wr in devtool console with Codepen


Nov 15 2016

  • Scroll into View
  • h key to hide things from view
  • Right click on dom inspector, Break on to debug on things like slider
  • When brought into Sources, use prettyPrint
  • Shift + click change color format
  • Hold click for shades of color
  • $0 is what I click in dom tree

Nov 16 2016

  • disable cache when open devtools
  • Add to workspace so file saving persist

Nov 17 2016

  • Call stack and watch functions or anonymous functions
  • blackbox libraries for call stack
  • debugger; to debug js files within file

Nov 20 2016

RG workshop & Chrome Devtools Profiling

  • vimtutor

  • vimiim chrome tab

  • hex (r, g, b)

  • conditional JS breakpoint in source

  • beware of jigsaw and memory leak graph pattern

  • red paint blip means Chrome suspects a page jank

  • Initial high green is expected. What to worry is a green spike.

Nov 23 2016

Page Jank

  • use Window.requestAnimationFrame()
  • wilsonpage/fastdom
  • koalastothemax.com
  • will-change: transform
  • garbage collections language. JS technically not necessarily have to manually allocate and deallocate memory, hence no leak in pure sense
  • just because u get rid of it from the website, doesn’t mean u get rid of them from memory
  • To debug, start with Timeline, and then Heap snapshot on Profiles tab. And then check Event Listeners in Elements
  • To benchmark or start optimizing performance, start with Audits and Network tabs.
  • When recording Timeline, look out for jigsaw pattern especially after GC (garbage collection) kicks in.

- [ ] [Four Semesters of Computer Science in 5 Hours](https://frontendmasters.com/courses/computer-science/) - [ ] [Introduction to JavaScript Programming](https://frontendmasters.com/courses/javascript-basics/) - [ ] [JavaScript: From Fundamentals to Functional JS](https://frontendmasters.com/courses/js-fundamentals-to-functional/)
- [ ] [Complete Introduction to React (feat. Redux and React Router)](https://frontendmasters.com/courses/react-intro/)