Advanced Web Development Quiz

Question 1 - async & defer execution order

• Put the scripts in the right order of execution

1
2
3
4
5
6
7
8
9
10

<script async src="async1.js" />
// Loads in 300ms
<script defer src="defer1.js" />
// Loads in 200ms
<script defer src="defer2.js" />
// Loads in 300ms
<script async src="async2.js" />
// Loads in 50ms
<script async defer src="async-defer.js" />
// Loads in 60ms

the order of execution is:

1. async2.js
2. async-defer.js
3. async1.js
4. defer1.js
5. defer2.js

• async scripts are executed as soon as they are loaded, while defer scripts are executed only after the HTML document has been fully parsed.
• async and defer both exists in the same script tag, async takes precedence over defer.

Test Your JavaScript Knowledge

• Slides

Event Loop & Task Queue

• Macrotask: setTimeout, setInterval, setImmediate, I/O, UI rendering

1

setTimeout(() => console.log('A'), 0);

• Microtask: process.nextTick, Promises, Object.observe, MutationObserver, queueMicrotask

1

Promise.resolve().then(() => console.log('B'));

Blazingly Fast JavaScript

Introduction

• Course Website

What this course is about > 这个课程是关于什么的
This course is as much a “performance” course as its a javascript fundamentals. If you stick through the whole course you will learn a about how javascript works > 这门课程既是关于性能的课程，也是关于 JavaScript 基础的课程。如果你坚持学完整个课程，你会学到很多关于 JavaScript 的工作原理
These are transferrable skills. Any other GC based language will have similar concepts > 这些是可转移的技能。任何其他基于 GC 的语言都会有类似的概念
Its also transferrable between bun and node and the browser > 它也可以在 bun 和 node 以及浏览器之间转移
We will not talk about the dom today > 今天我们不会讨论 dom
It will make you write better code. Better code in this case delivers what the customer wants but smoother, crispier, and smothered in coconut oil > 它会让你写出更好的代码。在这种情况下，更好的代码会让客户更顺畅、更清晰，并且涂上椰子油
we will not deep dive into perf or chrome-tracing or v8-tracing
we will not talk about “micro” optizimations (property ordering, monomorphism) > 我们不会深入研究性能或 chrome-tracing 或 v8-tracing, 我们不会讨论“微”优化（属性排序，单态性）

Engineering Management Fundamentals 101

Introduction

• The path to leadership > 领导之路
• Understanding the role > 理解角色
• Surviving the first 30 days > 度过前 30 天

Goals

• Build skills and knowledge to better understand engineering management > 建立技能和知识，更好地理解工程管理

• Shine a light on the true on the “hidden work” of management > 为管理的“隐藏工作”照亮一盏灯

• Provide tools to help navigate the transition and early days > 提供工具，帮助应对过渡和早期

• Provide insights into common situations > 提供对常见情况的见解

  阅读全文 »

Practical Problem Solving with Algorithms

Introduction

Disclaimer

1. Lab, not lecture // 实验，不是讲座
2. Using JS // 使用 JS

Course Overview

TL;DW

1. Ask better clarifying questions // 提出更好的澄清问题
2. Balance CPU vs Memory // 平衡 CPU 和内存
3. Shape data structure(s) to the problem, not the other way // 将数据结构形状与问题相匹配，而不是相反
4. “premature optimization” VS. “immature optimization” // “过早优化”与“不成熟优化”

Anytime there is a problem present to you, your first job is to understand that problem completely, not to write the code. That’s the last thing you do and that’s optional. // 每当有一个问题出现在你面前时，你的第一件事就是完全理解这个问题，而不是写代码。这是你最后要做的事情，这是可选的。

Bare Metal JavaScript: The JavaScript Virtual Machine

Introduction

== can be 15 times slower than === in some cases.

(a, b) => a + b is 3.6x faster than (a, b) => b + a

a = 0 - x is about 3-10x faster than a = -x

• Agenda

  • Introduction to VMs
  • CPU - Understanding the the Physical Machine > 中央处理器 - 理解物理机器
  • VMs - Arrays, Objects, functions, prototype chains > 虚拟机 - 数组、对象、函数、原型链
  • DeoptExplorer: collecting data from the VM > DeoptExplorer：从虚拟机收集数据
  • Deopt: calling conventions & inlining > Deopt：调用约定和内联
  • Megamorphism & Inline Cache: Object properties > Megamorphism 和内联缓存：对象属性
  • Holey Arrays: Prototype chains resolution > Holey 数组：原型链解析
  • == vs ===: valueOf()

Introduction to NextJS 13 V3

Introduction

• NextJS
• Course Repo
• Course Slides

History of Next.js

React is a JavaScript library for building user interfaces. It was created by Facebook in 2011 and made open source in 2013. React quickly gained popularity among developers due to its simplicity and effectiveness in building complex web applications. > React 是一个用于构建用户界面的 JavaScript 库。它由 Facebook 于 2011 年创建，并于 2013 年开源。由于其简单性和构建复杂 Web 应用程序的有效性，React 很快在开发人员中流行起来。

In 2016, Vercel (formerly Zeit) released Next.js, a framework for building server-side rendered React applications. Next.js provides benefits over regular React applications such as easier server-side rendering, automatic code splitting, and optimized performance. > 2016 年，Vercel（前身为 Zeit）发布了 Next.js，这是一个用于构建服务器端渲染的 React 应用程序的框架。Next.js 提供了比常规 React 应用程序更多的好处，例如更容易的服务器端渲染、自动代码拆分和优化的性能。

Next.js was created to solve some of the challenges that developers faced while building React applications. These challenges included the complexity of server-side rendering, which required a lot of configuration and setup, and the lack of optimized performance for large-scale applications. > Next.js 的创建是为了解决开发人员在构建 React 应用程序时面临的一些挑战。这些挑战包括服务器端渲染的复杂性，这需要大量的配置和设置，以及大规模应用程序缺乏优化的性能。

Next.js simplifies the process of building server-side rendered React applications by providing a set of tools and conventions that make it easier to get started. It also provides automatic code splitting, which helps to optimize the performance of the application. > Next.js 通过提供一组工具和约定来简化构建服务器端渲染的 React 应用程序的过程，从而使入门变得更加容易。它还提供了自动代码拆分，这有助于优化应用程序的性能。

Overall, Next.js has many advantages over regular React applications, including easier server-side rendering, automatic code splitting, and optimized performance. It continues to be popular among developers and has been adopted by many companies for building complex web applications. > 总的来说，Next.js 在许多方面都优于常规的 React 应用程序，包括更容易的服务器端渲染、自动代码拆分和优化的性能。它在开发人员中仍然很受欢迎，并已被许多公司采用，用于构建复杂的 Web 应用程序。

Vanilla JS - You Might Not Need a Framework

Introduction

• What we’ll cover > 我们将会学习什么

  • Vanilla JS > 原生 JS
  • DOM API
  • Fetch
  • Design Patterns > 设计模式
  • Single page applications > 单页应用
  • Web Components
  • Reactive programming > 响应式编程
  • Routing > 路由

• Pre-requisites > 先决条件

  • firtman.github.io/vanilla

• Course slides

  阅读全文 »

The Hard Parts of UI Development

Introduction

In UI Hard Parts we develop an under-the-hood understanding of building user interfaces in the web browser. > 在 UI Hard Parts 中，我们将在 Web 浏览器中构建用户界面的底层工作原理。

Principles of Engineering

• Analytical problem solving > 分析性解决问题
  • Can you break down complex challenges and develop a strategy for solving the problems. > 你能分解复杂的挑战并制定解决问题的策略吗？
• Technical communication > 技术沟通
  • Can I implement your approach from your explanation? > 我能根据你的解释实现你的方法吗？
• Engineering approach > 工程方法
  • How you handle “not knowing”, debugging, code structure and working w/docs. > 如何处理“不知道”，调试，代码结构和使用文档。
• Non-technical communication > 非技术沟通
  • Empathetic and thoughtful communication, supportive approach to the community. > 有同理心和深思熟虑的沟通，对社区的支持性方法。
• JavaScript and programming experience > JavaScript 和编程经验
  • Concepts like closure & data structures, state & view. > 诸如闭包和数据结构，状态和视图之类的概念。

Introduction

• Course website
• Course repo

What is Accessibility?

Web accessibility means that people with disabilities can use the web. > 网页无障碍意味着残疾人可以使用网页。

More specially, web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the web, and that they can contribute to the web. > 更具体地说，网页无障碍意味着残疾人可以感知、理解、导航和与网页交互，并且他们可以为网页做出贡献。