Skip to content

Presentation Topics

Jump to bottom
Cory Forsyth edited this page Feb 24, 2020 · 53 revisions

Possible presentations topics below.

Presentation Topics

Setting up your editor

Research how to set up a text editor (such as Sublime, TextMate, VS Code, etc.) so that it will automatically:

  • Syntax-highlight JavaScript, HTML, CSS and JSON files
  • Auto-format-on-save those files (tip: Prettier is a great option for this — it has good docs on how to integrate with various editors)

The goal if this presentation is to teach everyone in class how they can get set up with this highlighting and formatting.

CSS Breakdown

Choose a site that has interesting use of CSS and present a detailed breakdown to the class of how it works. What special selectors, if any, are used? What CSS properties are used?

Potential sites:

  • CSS Zen Garden
  • Pure CSS Minesweeper
  • Find one that interests you (Codepen often has many interesting examples to choose from). If you choose your own site, be sure to choose something that uses CSS to do the styling, not JavaScript.

How does web governance work?

What are the organizations that are involved in defining the web? What different standards and specifications exist, and who is in control of them? Who is on these committees? How often do they meet? What is their procedure for making changes?

Helpful links:

How does a browser load a web page?

Explain how web pages work, starting with when you type in a URL or click a link. How does your browser find the server? What information does the server send to the browser? How does the browser turn that HTML into a web page? How do external assets like CSS, JavaScript and images get included in the page?

Helpful links:

jQuery Review

What is jQuery? What sorts of things can it do to a web page? Explain the css, click, text, attr methods, and any others that are helpful.

Chrome Tricks and Tips

Special key commands and other hidden features in Chrome that not everyone knows about.

Different "types" of JavaScript

What is the difference between the DOM API, jQuery, the Chrome Extensions API, the JavaScript language, Node.js, and Ecmascript? Which of these are the same, and which are different? What is different about using JavaScript in the browser versus with Node.js? What APIs are available in one that aren't available in the other?

Chrome Special Pages

What hidden settings does Chrome offer? What can you change using chrome://flags? What other customizations are possible with Chrome?

Here's a list of special chrome urls. They are also listed at: chrome://chrome-urls (you have to type this in to the browser bar directly, it is not linkable). (Of course) There's an extension called About Chrome Page List that helps you find these, too.

Some of the pages that may be of interest:

  • chrome://dino — fun
  • chrome://crashes/ — view details of crashes
  • chrome://omnibox/ — debug how the omnibox shows selections
  • chrome://flags/ — modify browser behavior
  • chrome://interstitials/ — interesting
  • chrome://network-errors/ — list of all possible network errors and their pages
  • chrome://media-engagement/ — stats Chrome uses to determine if it will autoplay-with-sound video on any given page
  • chrome://accessibility/ — detailed accessibility information for open tabs

Chrome Command-Line Flags

Chrome can be started from the command line, and you can pass special flags to it to get even more detailed information about what it is doing.

See: https://peter.sh/experiments/chromium-command-line-switches/

Chrome DevTools — JavaScript debugging

How do access Chrome's DevTools? How do you use them to inspect/change the DOM? CSS? How can you view and debug running JavaScript? What do the other DevTool panels do?

For this presentation, be sure to show the following:

  • How to add a breakpoint in the "Sources" panel
  • Explain the play/pause, "step over" and "Pause on exceptions" buttons in the sources panel (these buttons).

Links:

Chrome DevTools — Network tab

Links:

Chrome DevTools — Elements Tab

Front-End Workflow Tooling

What are some of the different tools used in a front-end workflow? How do they interact? What are some of the available preprocessors for CSS (Scss, Sass, Less, etc), HTML (Haml, etc) and JavaScript (Babel, etc)? What are grunt, gulp and broccoli? Why do we concatenate and minify files, and what does it mean to do so?

What is DOM?

What is the Document Object Model? What are the types of things that can go on a page and how are they different (element versus text nodes)? What are attributes? Why is the DOM considered to be a "tree"? How do we use JavaScript to read and change the browser's DOM?

Useful links:

Events

What are the events that we can use JavaScript to listen for and react to on a web page? What code is used to add an event listener and remove an event listener? How do you add multiple listeners?

Links:

Browser Capabilities

Choose two of the new web capabilities that we haven't talked about in class already and report on them to the class. How widely is it supported? What could it be good for? How long has it been around and what are the future plans for it?

Links:

Chrome Extension Capabilities

Look at the Chrome Extension Overview and/or manifest.json file and choose two things we didn't already cover in class. What are these capabilities and how might your classmates use them? What are they good for? Any other restrictions or gotchas?

Use DevTools to Find Elements for jQuery

Focus on the "elements" tab of DevTools. Say you're building an extension/bookmarklet and want to figure out how to select all the elements of a certain kind on the page. How do you use the elements tab to do so? What else can you see and change from the elements tab? What leopard shortcuts are available for use here?

When presenting, focus on a few case studies — show a site or two and walk through how you might navigate its DOM. As a bonus, find a site that "lazy-loads" content and talk about a strategy for finding DOM elements that might appear after the page has initially loaded.

CSS Animations

CSS has gotten very powerful and can not only modify basic display properties (size/position/color/borders) of elements, it can also do animations. How do CSS animations work? What sort of pseudo-selectors (like :before, :hover, etc) exist and how do they work? Show off some interesting CSS (try searching around on Codepen) and explain how it works.

ES6 / ES2015 / ESNext

What new syntax is available for JavaScript these days? What does () => {} mean? What are let and const? What about destructuring assignment? When are new versions of ECMAScript (the technical name for JavaScript) released? What is the current version? What new features have been added in recent versions? What is "ESNext"?

Helpful links:

Async vs Sync

What's the difference between asynchronous and synchronous code? What is a callback and where does it fit in? What does it mean that JavaScript is "non-blocking"? What's blocking? What do you have to be careful about when writing asynchronous code?

Consider including in your presentation:

  • Notes on the JavaScript event loop
  • Mention the new Promises or async/await features in recent JavaScript versions
  • Description of how JavaScript is "single-threaded"

Useful links:

How companies track you online

How does Facebook and other sites track you online, even when you aren't on their site?

Topical: Facebook+Cambridge Analytica: How did they do it?

How did Cambridge Analytica mine all those facebook user profiles?

Can a == true && a == false be true in JavaScript?

Read this article that explains how this can be true and break it down for class.

Read the specs

Read the JavaScript (aka ECMAScript) spec or the HTTP/1.1 spec or the HTML Standard or CSS spec. Find something interesting there and explain it to the class.

These spec documents are the authoritative source for the underpinnings of the web. Browser creators know them well. In a sense these spec documents are recipes (very technically precise and dense ones) that describe how the browser is supposed to do its thing, from how it fetches resources over the network (the HTTP spec) to how it builds a DOM representation of an HTML page and displays it (HTML Standard) to how it is supposed to execute the JavaScript or CSS on that page.

These specs can be hard to penetrate initially. A good way to start is to choose something you already know pretty well and find the part of the spec that deals with that. For example the body element or p element or how the browser is supposed to render the HTML (e.g., what does the spec say the margin-top of the body element should be? Hint: It's not 0!). Other potential entrypoints are variable declarations in JS. Here is the WhatWG spec for what happens if you type "javascript:" into the address bar.

See if you can find out in the HTTP spec what the maximum allowable URL is (hint: they call it a Uniform Resource Identifier, aka URI).

What does the HTTP spec have to say about what characters are allowed in a URL, what characters have special meaning in a URL, and how to encode or decode those special characters?

Other related links:

HTTP Stateless Protocol

HTTP is considered a "stateless" protocol. What does that mean and how is it still possible for you to go to, say, gmail.com and have your email show up? That seems like gmail.com is remembering you somehow, which doesn't seem stateless, does it? How does that work? What's an example of a "stateful" protocol, by comparison?

How does this relate to Chrome Profiles? What are they and how do they work?

How is Chrome made?

The Chrome browser is largely open source, a project called Chromium. How does development on Chromium happen? Break down the various sub-projects and how they come together to form the browser. What's the difference between Chromium and Chrome? What's Blink? What's V8 and how does it get put into Chrome? Where else is Blink or V8 used?

For extra credit, try compiling the browser yourself (this is not simple).

Show some of the source code that makes up Chrome (preferably some source code you can roughly understand and explain).

Useful links:

"Hacking" Web Pages

What sort of security vulnerabilities exist with web pages? Many are "closed" now, sometimes by the addition of new technologies (e.g. CORS) that the browsers implement.

Search for "tabnabbing", "clickjacking", "xss", etc.

What is the "single origin" policy? Why is it important?

Useful links:

Using Extensions to avoid Paywalls

Read How Google's Web Crawler Bypasses Paywalls and How the Twitter App Bypasses Paywalls and break down for the class how these work.

Chrome Apps

How are Chrome Apps different from Chrome Extensions? Can Apps do anything Extensions cannot do? What about vice versa?

Links:

Reading the Chrome Extension Docs

What are the key pages of the Chrome Extension Docs? What do the various terms and tables mean on the extension documentation pages? How does one read them and make sense of them in order to use those Chrome APIs in their own extension? For example, what do all the details listed under "Parameters" for the chrome.tabs.create method mean?

Note that the point of this presentation is not to explain what the Chrome extension APIs are and what they do, it is to explain how to use the documentation to a) find an API that you might be interested in and b) understand how to use that specific API. For example, see this annotated screenshot.

Links:

Clone this wiki locally