Deconstructing the Modern Web Browser
Presented by Scott Davis. His email address is scott@thirstyhead.com. His Twitter handle is @scottdavis99.
Biography
![Scott Davis' Biography](slides/bio/scott-davis-bio.png)
Hi! My name is Scott Davis. I'm currently a Principle Engineer with ThoughtWorks. Before that, I ran a software consultancy out of Denver, Colorado called ThirstyHead.
I've been writing about web development for years -- articles for IBM, books for O'Reilly and the Pragmatic Bookshelf, and most recently videos for O'Reilly as well.
Fresh Butter
![Fresh Butter](slides/fresh-butter/fresh-butter.jpg)
Heavy Cream
![Heavy Cream](slides/heavy-cream/heavy-cream.jpg)
Whipped Cream
![Whipped Cream](https://cdn-image.myrecipes.com/sites/default/files/field/image/1811w-whipped-cream-getty.jpg)
Broken Whipped Cream
![Broken Whipped Cream](https://toriavey.com/images/2013/06/Homemade-Butter-on-TheHistoryKitchen.com-vintage-cooking-tutorial--900x675.jpg)
Butter Recipe
![Butter Recipe](slides/butter-recipe/butter-recipe.png)
Six Web Browsers
![Six Web Browsers](slides/six-web-browsers/six-web-browsers.png)
Browser Engines
![Browser Engines](slides/browser-engines/browser-engines.png)
JavaScript Engines
![JavaScript Engines](slides/javascript-engines/javascript-engines.png)
JavaScript Engines
![JavaScript Engines](slides/javascript-engines-2/javascript-engines-2.png)
HTML Deep-Dive
HTML 5.2 Spec
![HTML 5.2 Spec](slides/html-5.2-spec/html-5.2-spec.png)
HTML Spec - TOC
![HTML Spec - TOC](slides/html-spec-toc/html-spec-toc.png)
HTML Spec - TOC
![HTML Spec - TOC](slides/html-spec-toc-2/html-spec-toc-2.png)
Google DOM
![Google DOM](slides/google-dom/google-dom.png)
Google DOM
![Google DOM](slides/google-dom-2/google-dom-2.png)
Google DOM
![Google DOM](slides/google-dom-3/google-dom-3.png)
Google DOM
![Google DOM](slides/google-dom-4/google-dom-4.png)
Google CSSOM
![Google CSSOM](slides/google-cssom/google-cssom.png)
Google CSSOM
![Google CSSOM](slides/google-cssom-2/google-cssom-2.png)
Google A11y Tree
![Google A11y Tree](slides/google-a11y-tree/google-a11y-tree.png)
Google A11y Tree
![Google A11y Tree](slides/google-a11y-tree-2/google-a11y-tree-2.png)
Google A11y Tree
![Google A11y Tree](slides/google-a11y-tree-3/google-a11y-tree-3.png)
Google A11y Tree
![Google A11y Tree](slides/google-a11y-tree-4/google-a11y-tree-4.png)
Google A11y Tree
![Google A11y Tree](slides/google-a11y-tree-5/google-a11y-tree-5.png)
Google A11y Tree
![Google A11y Tree](slides/google-a11y-tree-6/google-a11y-tree-6.png)
JavaScript Deep-Dive
ECMAScript
![ECMAScript](slides/ecmascript-wiki/ecmascript-wiki.png)
ECMAScript Versions
![ECMAScript Versions](slides/ecmascript-wiki-versions/ecmascript-wiki-versions.png)
ECMAScript Versions
![ECMAScript Versions](slides/ecmascript-wiki-versions-2/ecmascript-wiki-versions-2.png)
ECMAScript Spec
![ECMAScript Spec](slides/ecmascript-spec/ecmascript-spec.png)
ECMAScript Web Scripting
![ECMAScript Web Scripting](slides/ecmascript-spec-web-scripting/ecmascript-spec-web-scripting.png)
ECMAScript Spec Reserved Words
![ECMAScript Spec Reserved Words](slides/ecmascript-spec-reserved-words/ecmascript-spec-reserved-words.png)
Script MDN
![Script MDN](slides/script-mdn/script-mdn.png)
Script MDN
![Script MDN](slides/script-mdn-defer/script-mdn-defer.png)
Bread JS
<script>
window.addEventListener('load', init);
function init(){
let b = document.querySelector('button');
b.addEventListener('click', readIntro);
}
function readIntro(event){
let paragraphs = document.querySelectorAll('p');
for(let p of paragraphs){
let msg = new SpeechSynthesisUtterance(p.innerText);
window.speechSynthesis.speak(msg);
}
}
</script>
<button>Read</button>
Conclusion
Six Web Browsers
![Six Web Browsers](slides/six-web-browsers/six-web-browsers.png)
Browser Engines
![Browser Engines](slides/browser-engines/browser-engines.png)
Google DOM
![Google DOM](slides/google-dom-3/google-dom-3.png)
Google DOM
![Google DOM](slides/google-dom-4/google-dom-4.png)
Google CSSOM
![Google CSSOM](slides/google-cssom/google-cssom.png)
Google CSSOM
![Google CSSOM](slides/google-cssom-2/google-cssom-2.png)
Google A11y Tree
![Google A11y Tree](slides/google-a11y-tree/google-a11y-tree.png)
Google A11y Tree
![Google A11y Tree](slides/google-a11y-tree-5/google-a11y-tree-5.png)
JavaScript Engines
![JavaScript Engines](slides/javascript-engines/javascript-engines.png)
Heavy Cream
![Heavy Cream](slides/heavy-cream/heavy-cream.jpg)
Fresh Butter
![Fresh Butter](slides/fresh-butter/fresh-butter.jpg)
Deconstructing the Modern Web Browser
Presented by Scott Davis. His email address is scott@thirstyhead.com. His Twitter handle is @scottdavis99.