View Effective_Engineer.md

FWIW: I didn't produce the content present here. I've just copy-pasted it from somewhere over the Internet, but I cannot remember exactly the original source. I was also not able to find the author's name, so I cannot give him/her the proper credit.


Effective Engineer - Notes

What's an Effective Engineer?

View what-forces-layout.md

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
  • elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
  • elem.getClientRects(), elem.getBoundingClientRect()
View hn_seach.js
function query() {
var
// HN is done with very unsemantic classes.
job_list = Array.prototype.slice.call(document.querySelectorAll('.c5a,.cae,.c00,.c9c,.cdd,.c73,.c88')),
query_list = Array.prototype.slice.call(arguments),
shown = 0, total = job_list.length;
// Traverses up the dom stack trying to find a match of a specific class
function up_to(node, klass) {
if (node.classList.contains(klass)) {