💻 算法 Day 7 (4 min read) / Algorithms Day 7

#238 Product of Array Except Self (Medium) — Arrays & Hashing / Prefix Products

🔗 LeetCode #238: Product of Array Except Self 🟡 Medium

📹 NeetCode Solution

🌎 Real-World Analogy / 现实类比

想象你是一家工厂的质检员，流水线上有 N 个零件，每个都有一个重量。你的任务是：对于每个零件，快速计算出其他所有零件的总重量之积（不能把该零件自己算进去）。

最笨的方法？每次都把其他所有零件重新乘一遍 — O(n²)，太慢了。

聪明的方法？先从左到右算一遍"前缀积"，再从右到左算一遍"后缀积"，两个一乘就得到答案！

📋 Problem Statement / 题目

Given an integer array nums, return an array answer such that answer[i] is equal to the product of all elements of nums except nums[i].

给定整数数组 nums，返回数组 answer，使得 answer[i] 等于 nums 中除 nums[i] 之外所有元素的乘积。

Constraint: Must run in O(n) time, without using division (不能用除法).

Example:

Input:  nums = [1, 2, 3, 4]
Output:       [24, 12,  8,  6]

Check: 
  answer[0] = 2 * 3 * 4 = 24  ✓
  answer[1] = 1 * 3 * 4 = 12  ✓
  answer[2] = 1 * 2 * 4 =  8  ✓
  answer[3] = 1 * 2 * 3 =  6  ✓

🔍 Step-by-Step Walkthrough / 逐步分析

Key Insight: For position i, the answer = (product of everything to the LEFT of i) × (product of everything to the RIGHT of i)

nums =   [ 1,   2,   3,   4 ]
index:     0    1    2    3

Left prefix products (prefix[i] = product of nums[0..i-1]):
prefix = [ 1,   1,   2,   6 ]
          ^     ^    ^    ^
          i=0   1*1  1*2  1*2*3
         (nothing (only (1,2   (1,2,3
          left)   nums[0])  left) left)

Right suffix products (suffix[i] = product of nums[i+1..end]):
suffix = [24,  12,   4,   1 ]
          ^     ^    ^    ^
        2*3*4  3*4   4   (nothing
                          right)

answer[i] = prefix[i] * suffix[i]:
  [0]: 1 * 24 = 24
  [1]: 1 * 12 = 12
  [2]: 2 *  4 =  8
  [3]: 6 *  1 =  6

Space Optimization: We can do this in O(1) extra space (output array doesn't count) by computing prefix in the output array first, then multiplying suffix on-the-fly from right to left.

🐍 Python Solution / Python 解法

def productExceptSelf(nums: list[int]) -> list[int]:
    n = len(nums)
    answer = [1] * n
    
    # Pass 1: Fill answer[i] with the PREFIX product (product of everything LEFT of i)
    # After this pass: answer = [1, 1, 2, 6] for input [1, 2, 3, 4]
    prefix = 1
    for i in range(n):
        answer[i] = prefix      # store product of everything before i
        prefix *= nums[i]       # update running prefix
    
    # Pass 2: Multiply answer[i] by the SUFFIX product (product of everything RIGHT of i)
    # We traverse right-to-left, tracking running suffix product
    suffix = 1
    for i in range(n - 1, -1, -1):
        answer[i] *= suffix     # multiply in the suffix product
        suffix *= nums[i]       # update running suffix

    return answer

# Test it:
print(productExceptSelf([1, 2, 3, 4]))    # → [24, 12, 8, 6]
print(productExceptSelf([-1, 1, 0, -3, 3]))  # → [0, 0, 9, 0, 0]

Trace with [1, 2, 3, 4]:

After Pass 1 (prefix):
  i=0: answer[0] = 1,  prefix = 1
  i=1: answer[1] = 1,  prefix = 2
  i=2: answer[2] = 2,  prefix = 6
  i=3: answer[3] = 6,  prefix = 24
  answer = [1, 1, 2, 6]

After Pass 2 (suffix, right to left):
  i=3: answer[3] = 6  * 1 = 6,   suffix = 4
  i=2: answer[2] = 2  * 4 = 8,   suffix = 12
  i=1: answer[1] = 1  * 12 = 12, suffix = 24
  i=0: answer[0] = 1  * 24 = 24, suffix = 24
  answer = [24, 12, 8, 6]  ✓

⏱️ Complexity / 复杂度

举一反三 / Pattern Recognition

The Prefix/Suffix Pattern unlocks many problems:

• Any time you need "everything except me" → think prefix × suffix
• Variant: LeetCode #42: Trapping Rain Water — uses max-prefix and max-suffix arrays
• Variant: LeetCode #152: Maximum Product Subarray — track both max and min prefix (negatives flip signs!)
• Variant: LeetCode #724: Find Pivot Index — prefix sum version of the same idea

Follow-up interview questions:

1. "What if the array contains zeros?" → The code already handles it correctly (the zero propagates into the suffix/prefix)
2. "Can you solve it with O(n²) first, then optimize?" → Always a good way to start
3. "What about overflow?" → Use Python (arbitrary precision) or modular arithmetic

📚 深入学习 / Learn More:

• 📹 NeetCode Solution Video — best visual explanation of the prefix/suffix approach
• Arrays & Hashing Pattern Guide — NeetCode Roadmap — see the Arrays & Hashing section for this pattern
• Related: LeetCode #42: Trapping Rain Water 🔴 Hard | LeetCode #152: Maximum Product Subarray 🟡 Medium

🧒 ELI5: If you have 4 friends and you want to know how many handshakes happen when you're NOT included, you count all the handshakes to your left, then all the handshakes to your right, and multiply them together — that's your answer!

🗣️ 软技能 Day 7 (2 min read) / Soft Skills Day 7

Technical Leadership: "Tell me about a time you simplified a complex system"

技术领导力："讲一个你简化复杂系统的经历"

为什么这很重要 / Why This Matters

这道题考查的不是"你删了多少行代码"，而是：

1. 你能识别真正的复杂性来源（accidental vs essential complexity）
2. 你有勇气说"这个可以更简单"，并推动改变
3. 你理解简化的代价 — 有时候"复杂"是有原因的

Senior/Staff 工程师最重要的技能之一：抵抗系统熵增，不让复杂性悄悄积累。

This question tests whether you can identify the root of complexity, have the courage to push for change, and understand the tradeoffs of simplification.

STAR Framework Breakdown / STAR 框架拆解

Situation (情境):

描述系统状态 + 为什么它变复杂了

• 关键信息：系统规模、团队背景、复杂性的历史原因
• 例："我们的支付服务经历了 3 年迭代，有 7 个微服务处理同一笔交易的不同阶段…"

Task (任务):

你的角色 + 为什么这个简化很重要

• 不只是"我负责这个" — 说清楚商业影响
• 例："每次新支付方式上线需要 6 周，竞对只需 2 周。我主导了简化工作。"

Action (行动):

这是最重要的部分！展示技术深度：

• 你如何诊断复杂性来源（画架构图？追踪请求链路？）
• 你如何区分哪些复杂性可以去掉，哪些必须保留
• 你如何获得团队 buy-in（技术评审、数据支撑、渐进迁移）
• 你如何降低风险（feature flags、灰度发布、监控）

Result (结果):

量化影响，不要含糊：

• ✅ "上线时间从 6 周降至 1.5 周"
• ✅ "代码行数减少 40%，P99 延迟从 800ms 降到 200ms"
• ✅ "新工程师上手时间从 2 周缩短到 3 天"

❌ Bad Approach vs ✅ Good Approach

❌ Bad:

"我们的旧系统很乱，我重写了它。现在好多了，代码更干净，大家都很满意。"

问题所在：

• 没说清楚复杂性的来源
• "重写"是危险词（没提风险管理）
• 结果模糊，没有数据
• 听起来像个人英雄主义，不像团队领导力

✅ Good:

"我们有一个支付编排服务，最初设计是 2021 年给 3 种支付方式用的，到 2023 年已经支持 12 种，服务里充满了 if/else 分支和特殊 case 处理。每次新方式上线，QA 要测试所有 12 种，因为改动影响面不可预测。

我花了两周时间梳理请求流，发现核心问题：所有支付方式被平等对待，但实际上 80% 的代码只和 2 种高复杂度方式有关。我提出用策略模式（Strategy Pattern）重构，让每种支付方式封装自己的逻辑。

说服团队是最难的部分 — 大家怕改出 bug。我做了一个 spike，证明可以在不改变任何外部 API 的情况下完成重构，并用 feature flags 控制灰度。我们花了 6 周分批迁移，每批覆盖 2 种支付方式。

最终：新支付方式上线时间从 6 周降至 1.5 周，QA 测试范围减少 60%，事故率下降了 35%。"

Scenario Template to Adapt / 可复用场景模板

Context: [系统名] had grown from [原始状态] to [当前状态] over [时间],
         resulting in [具体问题].

My Role: As [你的角色], I was responsible for [范围].
         The business impact was [影响] — [量化].

Diagnosis: I [诊断方式 — 画图/追链路/分析指标], and identified that
           the core source of complexity was [根本原因].

Solution: I proposed [方案], which addressed [核心问题] while
          preserving [必须保留的复杂性原因].

Risk Management: To validate, I [验证方法]. For rollout, I [迁移策略].

Result: [定量结果 1], [定量结果 2], [定量结果 3].

Senior/Staff Level Tips / Senior/Staff 级别加分点

🎯 区分 accidental vs essential complexity

• Essential: 业务本身就是复杂的（监管要求、多租户架构）— 必须接受
• Accidental: 历史债务、过度工程、沟通问题导致的 — 可以消除
• 在回答中明确说"这部分复杂性是必要的，我们保留了它"

🎯 说清楚你是如何 sell 这个方案的

Staff 工程师的简化工作往往需要跨团队协作。说说你如何：

• 用数据/可视化说服怀疑者
• 处理"如果没坏为什么要修"的反对声
• 建立渐进迁移计划让团队安心

🎯 提到你保留了什么

最好的答案会说"我们考虑过把 X 也简化掉，但决定保留，因为…" — 这体现了成熟的判断力。

关键要点 / Key Takeaways

1. 简化不是删代码，是降低认知负担 — 衡量标准是新工程师理解系统需要多久
2. 诊断先于方案 — 先说"我如何找到问题根源"，再说方案
3. 量化一切 — 上线时间、延迟、事故率、代码规模
4. 展示工程领导力 — 技术判断 + 团队推动 + 风险管理

📚 深入学习 / Learn More:

• The Wrong Abstraction — Sandi Metz — classic post on when simplification actually makes things worse
• A Philosophy of Software Design — John Ousterhout — the definitive book on managing complexity in software
• Simple Made Easy — Rich Hickey (Strange Loop Talk) — legendary talk distinguishing "simple" from "easy"

🧒 ELI5: Simplifying a complex system is like cleaning your messy backpack — you take everything out, throw away what you don't need, and put the rest back in a way that makes it easy to find your pencil without dumping everything on the floor.

🎨 前端 Day 7 (2 min read) / Frontend Day 7

CSS Positioning: relative, absolute, fixed, sticky

CSS 定位：相对、绝对、固定、粘性

猜猜这段代码输出什么？/ What does this code output?

<style>
  .container {
    position: relative;
    width: 200px;
    height: 200px;
    background: lightblue;
  }

  .box {
    position: absolute;
    top: 20px;
    left: 30px;
    width: 60px;
    height: 60px;
    background: coral;
  }
</style>

<div class="container">
  <div class="box"></div>
</div>

Where does the coral .box appear?

A) 20px from the top of the page, 30px from the left of the page

B) 20px from the top of .container, 30px from the left of .container ← ✅

C) 20px from the top of the viewport, 30px from the left of the viewport

D) It won't move — absolute positioning only works without a parent

Answer: B — because .container has position: relative, it becomes the containing block for .box.

🗺️ Visual Map of All 4 Positioning Modes

Code Examples / 代码示例

/* 1. RELATIVE — offset from its normal position, stays in document flow */
.badge{
  position: relative;
  top: -2px;   /* nudge up 2px from where it would normally sit */
  /* still takes up its original space in the layout! */
}

/* 2. ABSOLUTE — removed from flow, positioned relative to nearest 
   positioned ancestor (or <html> if none exists) */
.tooltip{
  position: absolute;
  top: 100%;     /* just below the parent */
  left: 50%;
  transform: translateX(-50%);  /* center it */
  /* KEY: the parent must have position: relative! */
}

/* 3. FIXED — always relative to the viewport, never scrolls away */
.navbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;  /* stay above everything */
}

/* 4. STICKY — hybrid: relative until threshold, then fixed */
.section-header{
  position: sticky;
  top: 60px;   /* becomes "fixed" 60px from top once scrolled past */
  background: white;
  z-index: 10;
}

你可能不知道 / You Might Not Know

⚠️ absolute 的"陷阱"：containing block 是谁？

absolute 定位是相对于"最近的已定位祖先"（nearest positioned ancestor = any element with position other than static）。

如果没有任何祖先设置了 position，那就相对于 <html> 根元素！

/* Common bug: forgot to add position: relative to parent */
.card{
  /* position: relative; ← forgot this! */
}
.card .badge{
  position: absolute;
  top: 10px;
  right: 10px;
  /* This badge will now position relative to the page, not .card! */
}

⚠️ sticky 需要高度限制！

sticky 只在其父容器的范围内有效。如果父容器太短，或者 overflow: hidden 被设置，sticky 会"不工作"。这是最常见的 sticky bug！

/* sticky won't work if parent has overflow: hidden/scroll/auto */
.parent{
  overflow: hidden;  /* this BREAKS sticky! */
}
.child{
  position: sticky;
  top: 0;  /* won't stick — parent clips it */
}

🎯 Mini Challenge

Create a notification badge that sits in the top-right corner of an avatar image, like this:

Write the HTML/CSS. (Hint: you need ONE element with position: relative and ONE with position: absolute.)

<details>

<summary>Solution / 答案</summary>

<div class="avatar-wrapper">
  <img src="avatar.png" alt="User" />
  <span class="badge">3</span>
</div>

.avatar-wrapper{
  position: relative;  /* containing block for the badge */
  display: inline-block;
  width: 60px;
  height: 60px;
}

.avatar-wrapper img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.badge{
  position: absolute;
  top: -4px;
  right: -4px;
  background: red;
  color: white;
  font-size: 11px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

</details>

📚 深入学习 / Learn More:

• MDN: CSS position property — the authoritative reference with live examples
• CSS-Tricks: Absolute, Relative, Fixed Positioning: How Do They Differ? — clear visual explainer
• Sticky CSS Headers — CSS-Tricks deep dive on the sticky gotchas

🧒 ELI5: CSS positioning is like choosing where to put your toys — relative means "move a little from where you already are," absolute means "go to a specific spot inside your room," fixed means "stay on the door no matter where I walk," and sticky means "follow me around, but only once I've passed a certain point."

🤖 AI Day 7 (2 min read) — AI 新闻速递 / AI News Roundup

Week of March 17–20, 2026

📰 Story 1: Meta 用 AI 替代内容审核员

What happened: Meta 宣布大规模推出 AI 内容支持助手，将大幅减少对第三方内容审核承包商的依赖。Meta 表示 AI 系统将处理"重复性的图形内容审核"以及诈骗、毒品销售等对抗性内容的识别。

为什么你应该关心 / Why you should care:

这不只是 Meta 的内部决策 — 它标志着 AI 在高风险判断任务中正式进入规模化应用。争议点在于：AI 审核仍然会有偏差和漏判，而当人类被从循环中移除，谁来负责？对于工程师而言，这意味着 AI 安全和内容策略将成为未来几年的关键工程挑战。

📰 Story 2: Samsung 宣布 730 亿美元 AI 芯片扩张计划

What happened: 三星宣布 2026 年将 AI 相关投入增加 22%，押注 Agentic AI 的算力需求激增。目标是超越 SK Hynix，成为 Nvidia 最大的 HBM（高带宽内存）供应商。

为什么你应该关心 / Why you should care:

GPU 之争的下一个战场是 HBM 内存。LLM 推理的瓶颈越来越不是算力本身，而是内存带宽 — 这也是为什么 Agentic AI（需要长上下文、多轮推理）会带来如此巨大的内存需求。关注 Samsung vs SK Hynix 的竞争，本质上是在关注 AI 基础设施的下一个瓶颈。

📰 Story 3: Signal 创始人与 Meta 合作加密 AI

What happened: Signal 创始人 Moxie Marlinspike 宣布其加密 AI 聊天机器人 Confer 将与 Meta AI 集成，为 Meta 的 AI 提供端到端隐私保护技术。目标：让 AI 对话内容对 Meta 服务器本身也不可见。

为什么你应该关心 / Why you should care:

隐私保护 AI（Privacy-Preserving AI） 是下一个重要技术方向。目前几乎所有 AI 推理都在云端完成，服务商可以看到你的所有对话。Moxie 提出的方向（结合 TEE/可信执行环境 + 同态加密）如果成功，将彻底改变 AI 应用的隐私模型。这对医疗 AI、法律 AI 等敏感场景意义巨大。

📰 Story 4: Microsoft 发布 MAI-Image-2 图像生成模型

What happened: 微软发布第二代 AI 图像生成模型 MAI-Image-2，主打"增强照片真实感"和"图像内文字生成更可靠"。现已在 Copilot 和 Bing Image Creator 上线。

为什么你应该关心 / Why you should care:

文字渲染（text rendering in images）一直是图像 AI 的"耻辱角落" — GPT-4 画出来的招牌字往往是乱码。MAI-Image-2 将文字生成列为核心改进点，这对营销、设计、UI 素材生成有直接影响。同时，这也表明微软正在摆脱对 OpenAI DALL-E 的依赖，建立自己的图像模型能力。

📰 Story 5: Amazon Alexa Plus 登陆英国 — Agentic AI 助手首个欧洲落地

What happened: 亚马逊宣布 Alexa Plus（搭载 agentic AI 能力的升级版）在英国上线，早期访问阶段免费，之后每月 £19.99（约 $26.50），Prime 会员免费。亚马逊特别强调其"genuinely British"——理解"cuppa"、"knackered"、"nippy"等英式表达。

为什么你应该关心 / Why you should care:

AI 助手本地化（localization）不只是翻译，还包括文化理解和方言处理。Alexa Plus 的"Agentic"定位意味着它不再只是问答，而是可以执行多步任务（预订、购物、控制智能家居）。这是 AI 助手从"聊天机器人"向"数字代理人"演进的关键节点，也是 OpenAI、Google、Apple 都在争夺的市场。

📚 深入学习 / Learn More:

• Meta AI Content Moderation Announcement — 官方博客原文
• Moxie on Confer + Meta AI Integration — 技术细节和隐私保护 AI 原理
• Microsoft MAI-Image-2 Announcement — 官方发布博客

🧒 ELI5: This week in AI: robots are learning to be internet safety guards, phone chips are getting a huge upgrade to handle smarter AI, someone figured out how to make AI chats private like a secret code, and AI assistants are learning to speak in different accents — even British English!