danwoods

/*
* There are 3 key problems with the React code below. Can you find them?
* Assume fetchUserProfile exists elsewhere.
*/
import { Suspense, useState, useEffect } from 'react';

const SuspensefulUserProfile = ({ userId }) => {
  // Problem #1 - Using `useEffect` and `useState` like this can lead to a waterfall situation, negating the benefits of `Suspense`
  // See - https://reactjs.org/docs/concurrent-mode-suspense.html#approach-1-fetch-on-render-not-using-suspense
  const [data, setData] = useState({});

danwoods

import numpy as np
from sklearn.linear_model import LinearRegression
X = np.array([[4, 1, 0], [6, 1, 0], [0, 0, 1]])
y = np.array([90000, 120000, 60000])
model = LinearRegression()
model.fit(X, y)

model.predict(np.array([[5, 1, 0]]))

danwoods

<style>.danmaku-box:{display: none}</style>

The Bell Witch

???

• Story everyone knew growing up - Wife did college halloween there

danwoods

---

Why?

Why is there an issue?

• What are some use-cases where JavaScript fails the web?
  • Computationally intensive
    • Image and video editing

danwoods

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;

danwoods

Variables

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types

• example
• types
• declaring
• scope

Expressions and Functions

danwoods

this.addEventListener("fetch", function(event) {
  console.log('WORKER: fetch event in progress.');

  /* We should only cache GET requests, and deal with the rest of method in the
     client-side, by handling failed POST,PUT,PATCH,etc. requests.
  */
  if (event.request.url !== 'https://myserver.ngrok.com/app.js') {
    /* If we don't block the event as shown below, then the request will go to
       the network as usual.
    */

danwoods

this.addEventListener("fetch", function(event) {
  if (event.request.url === 'https://myserver.com/app.js') {
    event.respondWith(
      ...

// Link to image of errored network call: http://imgur.com/xs2by8C

danwoods

{
  "preset": "google",
  "maximumLineLength": {
    "value": 150,
    "allExcept": [
      "regex",
      "urlComments"
    ]
  },
  "requireParenthesesAroundArrowParam": true,

danwoods

Hi, I'm Dan

What we're going to do:

• References - MDN, CanIUse, StackoverFlow
• Tools - Codepen, ngrok, Chrome Dev Tools: Console, Network, Elements, Inspect
• Demo Project
  • Template
  • DOM

• JS