Louis's blog

Go: Should You Return a Value or Pointer for Structs?

Tue, 02 Jun 2026 11:59:11 +0000

Consider the following Go code, which one would you prefer?

type SomeStruct struct {
    // ... fields
}

// Choice 1
func NewSomeStruct() SomeStruct {
    return SomeStruct{
        // ... fields
    }
}

// Choice 2
func NewSomeStruct() *SomeStruct {
    return &SomeStruct {
        // ... fields
    }
}

Why

I have been learning Go recently and, as a heavy user in other more high-level programming languages like Python, I find it quite intriguing to see Go throwing around pointers everywhere.

For those from the C/Cpp background it might seem not that interesting though.

The question I wanted to ask is, when returning structs, whether we should prefer or default to any one of those:

Return pointers
Return values so to somehow lower the mental burden.

Searching for answer

Unfortunately up till now I haven’t seen official guidance on this topic. There are official discussions about receiver types (When in doubt, use pointer receiver) and function arguments.

So, to consider whether to use values or pointers, we can take a look at the two sides:

Using value

Copying is fast when structures are small.
slices, maps are already pointer-ish, so no need to return by pointer. Go data structure
A value is more likely to live on the stack, which is good for performance.

Using pointers

Faster, if the struct is large.
- Comes with caveats though, sometimes it will trigger heap allocations and garbage collection. Because you use pointers, they may be subject to escape analysis which escapes to the heap, causing GC pressures and performance issues.
Some concurrency-related structures like sync.Mutex are NOT MEANT TO BE COPIED.
You may need the Optional semantic, in that case pointers gives you the ability to return nil

My rule-of-thumb: Identity

I decide to stick to the heuristics that I derived, in my current stage:

If the returned value does not have identity and is not too big, return values.
Else, default to using pointers.

If performance proves that pointers are a problem, then do the optimization.

What I say identity is that, for example:

type Point struct {
    X, Y int
}

then, semantically,

Point{1, 2} == Point{1, 2}

Those two points are “identity-less”, they basically represent the same thing.

But, if we are talking about

type DBConnection struct {
    socket net.Conn
}

then, each of those structs should represent different resources, and here pointer semantics wins.

You can think of why mutex locks should not be copied, since one mutex lock should relate to only one resource. A copied mutex would create two lock states that appear to guard the same thing but are actually independent.

On the "efficiency boost" of vibe coding

Sat, 16 May 2026 01:15:15 +0000

AI coding agents (in my context, LLM-based ones) are so popular these days that they became ubiquitous in many development environments. I would hypothesize that one of the main reasons why people are so obsessed with it is how it boosts the efficiency of development. Indeed, it is hard not to imagine you are a super duper developer when you first see your agent streams out the code in no time and the code just works.

However, I was starting to notice some issues when reviewing the AI generated code myself. Rather than being confident in what I have done, I started to find that it seems I am looking the code through a thin layer of mist - where it looks good to me (LGTM), but I am gradually feeling a sense of losing grasp of it.

At the end, since it works and most projects I am now handling are not serious projects, I just merged it. But not knowing the implications behind each line and just let the agent code will almost definitely lead to unfixable chaos at the end.

It just urges me to ponder, to what extent did agents boost our efficiency?

The long-term efficiency problem

There are already research like this which measures the impact of AI tools on the task completion efficiency of software engineers. But one important limitation of this kind of research is that it only measures the short-term efficiency boost for the engineers. That is, it only evaluates in the timespan of a certain task / task set, without evaluating the efficiency impact on the long-term which originates from the engineer’s growth.

One (not-so-rigorous) analogy to understand this is to imagine:

a pure vibe coder who does not understand anything about the task, and
an “old-fashioned” coder which codes on his own and search / learn troubleshooting method along the way.

Suppose they execute $N$ tasks that is in the similar domain, and consider the function of total time they spent on those tasks.

The vibe coder’s time spent is somewhat $O(N)$ since he throws in a similar prompt and wait for the output, and let AI troubleshoot it. Hence, the vibe coder spents approximately a constant amount of time for each task.

On the other hand, the “old-fashioned” coder could behave like $O(logN)$ which struggles at first but then gradually learn the domain knowledge that supports him to spend less time, and save the troubleshooting time when the LLM just cannot reach the correct answer.

Of course, I am oversimplifying in this analogy. For example:

There is an upper limit for human’s code efficiency.
There are chances that LLMs are so strong that, it ensures 100% accuracy in some closed-form task and deep understanding is just not needed or obsolete. (AI: “JUST TRUST ME :)”)
Agent systems also can grow as system maintainer gradually adds harness to it when encountering problems, making it less error prone and more efficient gradually.

With that said, I will be very interested if there are more research that looks into the long-term efficiency impact of AI coding agents, since the process of programming definitely happens at a longer time scale, both for individuals and companies.

Hidden prerequisite of harness engineering

“One cannot ask questions beyond one’s own cognition.”

Speaking of harness, I do think it is a great engineering approach to deal with chaotic systems like LLMs (which I think it is), especially the rule-based parts. You confine the system’s state in a “nice” subspace of the whole vector space by adding constraints such as providing feedback via hard-coded testcases.

I do recommend the original blog that brings forward harness engineering by Mitchell Hashimoto who co-founded HashiCorp and created Terraform.

Despite the popularity of harness engineering, one hidden yet somehow critical prerequisite for writing a harness is that you at least shall have a higher level of understanding comparing to the AI agent. After all, if you do not know the internal details of the system, the implicit domain knowledge and best practice, how can you turn those constraints into rules?

Unfortunately, those knowledge that are used to control the LLMs cannot be easily acquired.

System specific knowledge are somehow more confined in the private domain
Engineering tradeoffs are case-by-case
Best practices and instincts are hard to learn from textbooks and more learnt by hands-on that involves error and retrospectives.

I once read the post (in Chinese) from Prof. Tuo Zhao about his thought in AI agents and teaching students, where I quote the translation here:

“What I learned through this process went far beyond writing C++ or tuning BLAS routines. It was only by building software for a real system — one with actual users, real performance constraints, and production-level demands — that I gradually came to understand what numerical stability really means, what good interface design looks like, and what it takes to make trade-offs under engineering constraints.”

“Students would come to me with these problems, I would explain the reasoning behind them, and then they would go back and revise their code — only to run into new problems afterward. On the surface, the cycle looked slow. But in reality, it was an incredibly efficient training mechanism. By being forced to implement things themselves, students were also being pushed into thinking at the design level. What they learned wasn’t just how to write code, but how to understand a complex system.”

“The reason I’m comfortable letting AI rewrite large portions of code is because I already know how to verify the results. … There are countless implementation details you simply cannot learn from reading a textbook. They’re forms of judgment that accumulate slowly through debugging, through mistakes, through running into problems over and over again. … What people lack today is not the ability to write code, but the ability to judge whether code is actually correct. And that kind of judgment can only be built by having implemented things yourself. This creates a paradox that I find deeply unsettling: AI has made implementation easy, yet implementation experience is precisely what builds the ability to verify. Verification ability is a prerequisite for using AI effectively, but the very path that develops that ability is now being eroded by AI itself.”

In another sense, although LLM coding agents seem powerful, because of its chaotic nature (e.g. hallucination), its capibility is somehow soft-capped by its user’s capability in the context of coding. Missing hands-on and retrospective, in that sense, dangerously lowers this cap.

Do we really yield “profit” from agents?

A very simple and trivial rule in finance is that if the return is negative, you should NOT invest in it. We can easily migrate this reason how we shall use our AI. The revenue from using AI agent is somehow $T_{handcoding} - T_{prompt}$, while the cost is the difference in, say $T_{review}$, $T_{housekeeping}$ or $T_{harness\ engineering}$ (or maybe plus the bill you paid for your tokens which could skyrocket).

To be clear, I am NOT an anti-AI activist. I did research on deep learning and I utilize LLMs in many explorations, learning, brainstorming and summarization tasks, and they do bring about convenience.

But still, I do encourage every software engineers to think about how to use LLMs to make the revenue - cost positive.

Is it okay to not understand the system so deep? Is there a chance that I pay for the cognitive debt in the future?
Do extra fact-checking and review time exceed the merit of code generation speed?
Is writing “detailed” natural language specifications and harness really faster than writing code? After all the most unambiguous specification is code.

Again, those questions should be considered case-by-case in different scenarios, and the answer changes on the nature of the project or the scale of impact.

I would like to share some circumstances where I do get sure profit from LLM technologies.

Navigation: I let AI guide me through the codebase to provide some understanding. It helps me shrink the search space a lot, and I can easily identify if the AI is hallucinating when I inspect the code.
Brainstorming: A good nature of chaotic system is that it can diverge which could lead you to considerations you never thought before. Although many of them are easily searchable on the Internet, it is good to talk with it like talking with a junior in a different field where you can keep in mind that it could be wrong.

Ending

When I was attending my undergraduate lab, my supervisor first told me that “engineering is all about tradeoffs”. And it is not in any sense different when we are introducing AI agents into our workflows. The simplest modelling for the tradeoff is coding efficiency and growth efficiency, but even so caveats exist. AI is here to stay, and a careful retrospective on this, in my opinion, is important in this new development paradigm.

关于ClientWebAPI

Thu, 22 May 2025 02:48:59 +0000

看到了Hono.JS的介绍，其中有一个部分是它可以 run everywhere，因为其使用了Web API Standard。

正好自己之前对这些Web API一知半解，所以简单复习了一部分。

DOM / BOM Manipulation

主要是利用了document、window等对象来操作DOM和BOM。

document：提供操作文档的方法。例如querySelector、getElementById等。通过这种script可以让网页动态化等等。
window：表示浏览器窗口的对象，可以知道比如说窗口的dimension，也可以操作例如滚动窗口到哪些地方。一些event handler也是直接绑在window上。
- 也因此复习了一下可以监听的events，例如scroll。使用addEventListener可以绑定事件处理函数，removeEventListener可以解绑事件处理函数避免内存泄漏。
history：表示浏览器的历史记录，可以用来操作浏览器的前进后退等功能。

Fetch API

应该是后端接触最多的一种API了。 Request和Response是两个最重要的对象。

二者基本上都可以调用类似的方法来进行解析。

.formData()：将数据解析为FormData对象，文件也会被自动解析为File对象。
.json()：将JSON数据解析为JavaScript对象。
.text()：将文本数据解析为字符串。
.arrayBuffer()：将数据解析为ArrayBuffer对象。（可以用来直接处理二进制数据）

除此之外Response还有.ok、.status、.statusText等属性可以用来判断请求是否成功。

另外一般地，如果没有特殊需求的情况下，基本上API endpoint都是用json或multipart/form-data来传输数据，比较少直接传输二进制数据或者单纯的text。

Local Storage 和 Session Storage

存储在浏览器中的key-value pair，每一个origin都有自己的独立存储空间。不同的是：

localStorage：存储的数据在浏览器关闭后仍然存在，除非被purge。多个同origin的tab之间是共享的。
sessionStorage：存储的数据在浏览器关闭或标签页关闭后会被删除。按照标签页隔离。

关于html图片和相关css的随记

Mon, 19 May 2025 09:49:36 +0000

最近因为参加了一个hackathon重新捡起了前端，然后发现styling这方面需要和组友合作很多所以开始重新inspect一些css的细节。

今天想要谈一些关于前端中图片的使用。

1. 图片的宽高

图片是一个replacement element，自己有一个intrinsic size。但是其真实显示的大小是由CSS来决定的。

HTML best practice是务必给图片加上width,height和alt属性。这样网页会预留好空间来放这个图片，避免layout shift。与此同时也会知道图片的宽高比。这样css控制时就会知道图片原始的比例。

注意css中，width和height是可以是relative的。我以前的误解是这个东西必须是绝对数值，可以看看下面我为什么会产生这个误解（。

img {
  width: 50%; /* 相对于父元素 */
  height: auto; /* 让浏览器自动计算高度，保持宽高比 */
}

2. Next.JS中的Image

Next.JS中Image组件中必须用绝对数值specify的width和height是决定图片的intrinsic size。最终渲染的大小是css决定的。

这个就是我以为css中必须是绝对数值的原因。

另外一个就是Next.JS可以使用fill来让图片充满父元素，这个时候就不用width和height。

然而一个细节就是默认这个时候这个图片的position是absolute的。所以要记得设置父元素/祖先元素为非static的position。

3. 关于`<img>`的display

<img>的display是inline的。

因此其实可以通过styling来改变其display的方式使得它不必包裹在一个<div>中也能服从良好的布局。

之前有一篇文章说最好要用<div>包裹图片，现在想想也不一定。事实上object-fit和object-position都不必再来一个<div>来包裹图片，这些效果会直接作用于画框（<img>）上。

MDN object-fit

MDN object-position

4. 关于text-align

text-align其实不单单是用来控制文字的，任何inline的元素都可以用这个属性来控制。

所以理所当然地你可以用这个来居中图片（只要你还没有改变它的display，默认是inline）

img {
  text-align: center;
}

MDN text-align

5. 关于如何学习CSS的一个说法

看到一句话说CSS不能使用传统的程序员思维来学习，更多是随用随查，多用。但是底层的一些概念要搞懂。

有一个学习路线说的是搞懂四个概念：

选择器，样式，盒模型，定位

个人感觉总结的还是很不错的，事实上很多时候颠来倒去的奇妙bug和不优雅的实现也是因为这些概念没有扎实引起。

以后可以参考这个学习路线来再吃一遍css。

小林coding - OS阅读笔记

Mon, 03 Mar 2025 04:01:14 +0000

https://xiaolincoding.com/os/

最近愈来愈觉得要在做中学，所以这里记录一下小林 coding 教程中个人认为 OS 里面对非底层（i.e. 不涉及系统编程的）程序员的重要概念。部分重要图解同样转载至上文，侵删。

注意这些内容是个人认为【绝对不能忘】的内容，而非一个完整的 list。知道这些 high-level 的设计概念之后详细设计再进行深入。类比一下，你可以把这些东西称作你应该放在 register 或者 L1 cache 里面的东西，但是碰到细节问题你还是需要 L2, memory, disk 的。 : )

CPU / Cache

存储器的层次结构为：
- Register
- L1, L2, L3 Cache (SRAM)
- Memory (DRAM)
- Disk (SSD / HDD)
CPU Cache 每次访问数据（这个其实包括数据和指令）的时候都会缓存和其相邻的块。要充分利用这个 locality。
- 访问数据时，按照内存的布局顺序访问。
- 访问指令时，由于 CPU 存在分支预测，所以处理 collection 数据的 if-else 的时候，先 sort 再处理会更快。（原因是分支预测器在 collection 是顺序的时候会根据历史命中数据对未来进行预测，这样命中率会很高。）

Memory

OS 为进程提供虚拟内存，并有一个 mapping 机制将虚拟内存 map 为物理内存。
内存的分割分为分段(segmentation)和分页(pagination)。它们可以合在一起使用，称为段页式内存管理。 i.e. 先把程序划分为多个有逻辑意义的段，再把每个段划分为多个页。
Linux 内存布局如下。
OS 会将没有经常用到的内存换出到物理内存之外，称之为 swap。
对于malloc而言，分配虚拟内存时不会分配物理内存。只有访问的时候才会触发 page fault，分配物理内存。
内存紧张/OOM 的时候内存存在一系列的回收机制。

Process

进程是一个运行中的程序。
进程理论上有如下状态（Linux 的模型有所不同，但是基本思维类似）。
OS 通常会把阻塞的进程的物理内存 swap 到硬盘，需要的时候再换入。这个状态叫做挂起。
PCB（进程控制块）是进程的唯一存在标识，包括其状态，内存空间，打开的文件的列表，I/O，以及 CPU 的状态信息（用于进程被切换之后能继续执行）。
进程间的通信方式有 pipe，消息队列，信号量(semaphore)，信号（唯一的异步通信机制），socket 等。

Thread

线程是进程中的一条执行流程，满足：（1）可以并发运行，（2）可以和同进程的线程共享相同地址空间。
线程切换快的一些原因：无需创建 PCB，虚拟内存共享（意味着无需切换页表），数据传递无需经过内核（因为共享内存和文件资源）。

Mutual exclusion and synchronization

进程的协作可以通过锁和信号量实现。
经典的几个问题：Dining philosopher, producer-consumer
避免死锁最简单的方法就是资源有序分配法。（i.e. 两个线程用同样的顺序访问资源。）
理解概念：互斥锁，自旋锁，读写锁，乐观锁，悲观锁。详解

（未完待续）

HTML/CSS/JS核心记忆索引

Mon, 17 Feb 2025 14:28:25 +0000

这篇文章提供一个个人的快速索引，旨在以后忘记 html,css,js 时能尽快恢复大部分的核心知识。

这篇文章的要求的知识范畴是：知道这些东西能让你更有自信地使用框架（例如 React）。

详细的语法大部分不会包括在内，大部分时候你可以直接查询。

这不是一篇教学笔记。

HTML

HTML 是一种 markup language，渲染时形成 DOM Tree.

HTML 提供块级元素和内联元素（虽然新标准提供更加详细而复杂的分类，但是可以这么来表现）。

HTML 可以展示文字，图片，视频，音频，画布，以及超链接。

HTML 可以表现不同的标题，强调，斜体，horizontal line，上下标。

HTML 的 tag 一些具有语义。对于一个页面其结构一般是header, nav, main, aside （侧边栏）, footer. 对于部分一般使用section。

只有在没有适合语义的时候（例如对一组元素做 styling 时）才使用无语义的块级元素<div> 和内联元素<span>。此外，<h1>一般一个页面只用一次，方便 SEO。

HTML 的 header 可以设置 title 标题，charset, favicon，description 描述，lang 语言等元信息。这些对于 SEO 非常重要。

元素参考

Header 相关的设置

CSS

层叠

CSS 层叠样式表的核心是层叠。

层叠体现在：顺序（后来的会覆盖前面的），优先级（一套优先级计算机制），继承（一些属性，例如颜色，会被子元素继承）。

层叠规则

选择器

CSS 通过选择器来进行元素的选定。你可以用 id，class，或者 type (html tag 的类型) 来选定。

CSS 也可以选择后代或者多个条件同时满足的元素。

选择器语法

伪类与伪元素

伪类可以选择一个元素在特定的状态下的样式，例如 hover。用单个冒号，形如:hover。

伪元素可以选择一个元素并且为其添加一个虚拟元素，这个虚拟元素如同其子元素，所以你可以通过relative, absolute来 style 它。用双冒号，形如::after。

伪类和伪元素

盒模型

在 CSS 中，一切都是盒。

盒模型

两个注意点：

用【替代盒模型】是现代最佳实践，其 width 和 height 描述的是 content + padding + border
Margin 可以为负并且产生 merge。

盒有三种外部表现：block, inline, inline-block。（块级/内联）

最大的区别就是：是否换行，width/height 设置是否有效，是否把周围元素推开。

内部表现包含flex和grid。

flex是弹性盒模型。它可以让元素在一维上对齐，并且可以让元素按照自己的内容伸缩（flex-1, etc.）

display属性定义了内部和外部的表现。

display

弹性盒模型 flexbox

字体样式与字体栈

在 font-family 中堆叠一系列字体，最后一个字体为系统默认字体的标识，以确保字体可用。这被称为字体栈。

p {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

保底字体为：serif（衬线），sans-serif（无衬线），monospace（等宽，一般用于代码）

字体

布局流与定位技术

默认地，文档将按照默认布局流进行排布。

CSS 利用position将元素移出默认布局流，并且用inset等来定位他们。以下改写自 mdn。

静态定位（static）：放在默认位置。
相对定位 (relative): 相对于原来其【应该在的默认位置】进行移动。
绝对定位 (absolute): 相对于其最近被定位祖先元素（比如被设置为relative的）。 如果祖先树不存在这样的元素，那么相对于<html>进行调整。 （所以你需要指定一个祖先元素为relative然后才能正常使用absolute）
固定定位（fixed）: 相对于视窗。
粘性定位（sticky）: 先保持和 static 一样的定位，当它的相对视口位置（offset from the viewport）达到某一个预设值时，它就会像 position: fixed 一样定位。

布局流

层叠层 (Cascading Layer)

用层级来调整 css 的优先度，使得一系列样式可以被定义在同一个@layer中，并定义覆盖顺序。

@layer theme，layout，utilities;

@layer layout {
  main {
    display: grid;
  }
}

在 tailwind 中是核心概念。（base, component, utilities）

注意。未分层的层外样式优先权比任何层内样式都高。

层叠层

Javascript

此处不涉及 js 基本语法，异步编程 etc.，只涉及浏览器中重要的模式和知识。

事件与事件冒泡

DOM node 可以触发事件，可以登记 callback 以响应事件。

在一个 dom node 触发的事件会默认冒泡至其父节点。

callback 中的event ((e) => {...})中包含了一些重要信息。

e.target：触发了这个事件的元素。
e.currentTarget：处理这个事件的元素（这个 callback 被 register 的元素。例如说，冒泡的时候，target 就会是这个子元素，currentTarget就是目前事件到达的父元素）。
e.preventDefault()：禁止默认行为（例如表单中按钮的默认行为是提交表单）

Web APIs

提供一些重要的 Web API。

客户端重要的 objects:

Window：可以得到窗口大小等信息。
Navigator：媒体流等信息。
Document：操作 DOM（增加 node 等等）

客户端存储 objects：

sessionStorage: 浏览器关闭时会消除的 kv pairs。
localStorage：会持续保存，浏览器重启也不会消除的 kv pairs。

获取数据：

fetch

客户端 Web API

mdn CSS 概要记录 - 选择器和盒子模型

Sun, 16 Feb 2025 15:37:49 +0000

学习 tailwind 之后想学习一下 CSS 的基础概念，所以去翻了 mdn CSS 基础。

有一些选择器感觉是非常适合原来的 vanilla CSS 而设计出来的，但是对于 tailwind 这种 utility-based 的 CSS framework 不太常用（一个例子是+这种兄弟 selector）。

所以记录一下比较核心的概念（相对经常用到的）。这篇文章主要写选择器和盒子模型。

1. 选择器

选择器选定 HTML DOM Tree 中的既定元素，并且增加对应的样式。

以下是一些很常用的选择器样式的格式。

/* 选择一种html tag类型 */
h1 {
}

/* 选择一个类 */
.class1 {
}

/* 选择一个id */
#id1 {
}

/* 有title属性的锚元素（anchor）*/
a[title] {
}

/* 有href, 并且href是"https://example.com"的元素 */
a[href="https://example.com"]
{
}

/* *****复合选择器***** */
/* 选择一个既有class1又有class2的h1 element */
h1.class1.class2 {
}

/* 后代选择器：选择为div的子元素的p (后代) */
div p {
}

/* *****伪类与伪元素***** */
/* 伪类 用:标记 */
a:hover {
}

/* 伪元素 用::标记 */
a::after {
  /* 必须设置content属性，即使是空字符串。 */
  content: "";
}

2. 伪类和伪元素

这个对我是一个比较新的概念。

伪类指的是在特定状态下才被 apply 的选择器。比如说：hover 的时候。

伪元素创造一个虚拟元素。它可以被视为目标元素的子元素。例如说，可以用::before或者::after在元素前后添加新内容。也可以精准选定第一行等等。

除了在元素前添加图标之外，由于可以被视为目标的子元素，因此理论上也可以对目标元素使用relative，然后子元素使用absolute来添加覆盖该元素的阴影或者动画效果。

这里有一个类似 Material design 的水波纹效果的例子。

button {
  position: relative; /* 让 ::after 绝对定位时相对这个按钮 */
  overflow: hidden; /* 防止水波超出按钮 */
  background: #3498db;
  color: white;
  border: none;
  padding: 12px 24px;
  cursor: pointer;
  font-size: 16px;
}

button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

button:active::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
}

感觉不少 css 特效的底层都用到了伪元素，算是解答了心中的一个疑惑。

3. 盒模型

我超！盒！

盒模型是 CSS 的基础之一，包含content, padding, border, margin。

盒子的参数可以被归纳为：外部显示类型和内部显示类型。

3.1 外部显示类型(outer display types)

block
- 产生换行。
- 高宽设置(width, height)有效。
- padding, border, margin 会将其他元素推开。
- 未指定宽度时，通常直接占到 100%父容器的宽度。
inline
- 不产生换行。
- 高宽设置无效。
- padding, border, margin 会被应用。水平的边距会把其他元素推开。但是，垂直边距不会把其他inline元素推开。也就是说，如果溢出的话，会和其他inline元素重叠。
inline-block
- 是inline和block的 mix。
- 不产生换行。
- 高宽设置(width, height)有效。
- padding, border, margin 会将其他元素推开。

3.2 内部显示类型(inner display types)

通常指的是flex, grid这种掌管内部元素排布的类型。

3.3 替代盒模型

Tailwind 默认使用的是替代盒模型。(事实上，替代盒模型也是现代 css 开发的最佳实践。)

.box {
  box-sizing: border-box;
}

原有的盒模型，width和height指的是盒子的内容大小，也就是实际大小应该加上padding和border。

替代盒模型中，width和height指的是盒子可见范围的大小，也就是算进了padding和border的大小。

3.4 细节：外边距折叠 Margin Collapsing

算是一个细节，这里引用原文。

外边距是盒子周围一圈看不到的空间。它会把其他元素退推离盒子。

外边距属性值可以为正也可以为负。在盒子一侧设置负值会导致盒子和页面上的其他内容重叠。

但是，当两个外边距重合的时候，有一套独特的计算方法。

简而言之就是“合并取最大”。

根据外边距相接触的两个元素是正边距还是负边距，结果会有所不同：

两个正外边距将合并为一个外边距。其大小等于最大的单个外边距。

两个负外边距会折叠，并使用最小（离零最远）的值。

如果其中一个外边距为负值，其值将从总值中减去。

以上。

Next.JS的ESLint + Prettier设置

Sun, 16 Feb 2025 11:03:44 +0000

简单记录一下在设置自己东拼西凑全栈的 ESLint + Prettier 的小 tips 和坑。

技术栈

首先贴一下自己最近接触 Web dev 之后选择/脑补出来的技术栈，设想的使用场景是个人的兴趣开发，PoC 或者是小规模应用。

Javascript / Typescript / React
Meta-framework: Next.JS
- 前后端可以同时开发，感觉还是很不错的。
CSS: TailwindCSS
组件调试: Storybook
UI 库: shadcn-ui，lucide-react（图标）
- 这个很看个人的爱好，我个人挺喜欢 shadcn 的设计语言。
认证系统: Auth.JS
- 懒人，开箱即用.jpg
ORM: Prisma
输入/输出验证: Zod
测试框架: Jest
Format/Linting：ESLint + Prettier
OpenAPI：next-swagger-doc
表单: react-hook-form

Email 方面目前还没有需求，目前看着 resend 不错。

关于 ESLint + Prettier 的设置

项目开始的时候自然要设置一下 Format 和 linting。虽然 ESLint 也有 formatting 的功能，但是 Prettier 胜在开箱即用，据 stackoverflow 而言速度也快。

这次的方法针对的是配合 tailwindcss 的设置。

设置完你的 next.js（利用create-next-app）。你的 tailwind 应该也在这个时候设置完毕了。
安装 prettier。

npm i -D prettier

为了防止 prettier 全局扫描时也扫描 node_modules 的全部文件，创建一个.prettierignore。

//.prettierignore
node_modules

prettier 存在一个配合 tailwindcss 的 plugin，可以按照 tailwind 推荐的方式来 rearrange classes。详见这里。

我们首先安装一个 plugin。

npm install -D prettier-plugin-tailwindcss

然后，准备一个prettier.config.mjs。（写这篇文章时 prettier config 对 ts 的支持仍在 beta，所以用 mjs 以求稳定性。）

const config = {
  plugins: ["prettier-plugin-tailwindcss"],
};

export default config;

由于 eslint 和 prettier 可能会在 formatting 上发生冲突，所以安装一个 prettier 的官方包 eslint-config-prettier，让 eslint 来处理 linting，prettier 来处理 formatting。由于具体 config 方法各异，请参考这个 repo 的 README，给出了非常详尽的步骤。
（可选）可以打开 vscode 的自动 formatting-on-save。
- 在 marketplace 安装 Prettier 的插件。
- 搜索default formatter。
- 设置 Default formatter 为 Prettier-code formatter。
- 搜索format on save并将其打开。

现在可以快乐地使用了！只要按 Ctrl+S 就会自动做好 formatting，让你的代码更加可读。

速通Kotlin

Mon, 10 Feb 2025 03:36:36 +0000

工作需要学习一下Kotlin，写一篇速通笔记。

思路

首先再复习一下看K&R学到的编程语言思路。

变量声明，赋值，以及数据类型
函数定义
Collections（集合类）以及迭代方法
操作符
Flow-of-control
内存管理模型
I/O
编译

1. 变量

Kotlin声明方式有两种, var（引用可变）与val（引用不可变）。推荐不可变。这个可以类比js的let和const。

类型可以参考Java，基本没有变化。其声明方式类似Py或者TS。

val nullableString: String? = null

此外Kotlin支持空安全，syntax为类似String?

2. 函数的定义

fun <function-name>(<function-args>): <return-type> {
    // body
}

和js一样，kt的函数是一等公民，可以作为参数和返回值。

此外kt还有一种非常神奇的中缀函数，可以将函数当一个operator来使用。

infix fun Int.plus(x: Int) = this + x
1 plus 2

Kotlin的Lambda比较有意思。

val function_variable = { <parameters> -> <body> }

eg.

val sum = { x: Int, y: Int -> x + y }

Lambda如果只有一个参数也可以用it隐式引用。

val square = { it: Int -> it * it }
// 或者
val square: (Int) -> Int = { it * it }

list.filter { it > 0 }  // 过滤正数

Lambda可以多行。最后一行为返回值。

val transformer = { x: Int ->
    if (x > 0) {
        println("Positive number")
        x * 2
    } else {
        println("Non-positive number")
        0
    }
}

3. Collections

Kotlin常用的聚合类有三种，并且每一种都有Mutable和Immutable的Variant。

List / MutableList：数组
Map / MutableMap：k-v pair
Set / MutableSet：无重复元素的集合

一样地可以迭代。

// 列表迭代
val list = listOf(1, 2, 3)
for (item in list) {
    println(item)
}

// Map迭代
val map = mapOf("a" to 1, "b" to 2)
for ((key, value) in map) {
    println("$key -> $value")
}

4. 特殊操作符

除了各个语言中经常出现的操作符外：

4.1 Elvis

代表的意思是“如果非空则前，如果空则后”。

val name: String? = null
// 如果name为null，使用"Unknown"
val displayName = name ?: "Unknown"

4.2 区间

// 闭区间
for (i in 1..5)

// 开区间
for (i in 1 until 5)

// 步长
for (i in 1..10 step 2)

// 倒序迭代
for (i in 10 downTo 1 step 3)

5. Flow-of-control

并没有非常显著的差别。

最大的差别主要是when的语法

val num = 3
val result = when (num) {
    1 -> "One"
    2, 3, 4 -> "Few"  // 多个值匹配
    in 5..10 -> "Several"  // 范围匹配
    else -> "Many"
}
println(result)  // Few

6. 关于内存和底层

大部分和JVM类似。

目前总体看下来kt的感觉是更加舒适的语法糖和空安全为主。

之后会看看Kotlin Compose Multiplatform。

利用RadixUI的Overlay解决方案

Wed, 05 Feb 2025 08:59:05 +0000

shadcn-ui中有一个Dialog组件可以很快速地创建Dialog + Overlay。其基本功能就是会显示一个黑色覆盖层，并且覆盖层中间会弹出一个窗口作为Dialog。

但是shadcn-ui中的组件已经经过充分定制。有些时候自己已经设计好了一份弹窗，不想要shadcn的predefined style。一种方法是去修改shadcn源码，另一种方法是直接用shadcn底层的radix来写，客制化程度更高。

这里我们用一个例子，假设我们已经有了一个Component叫做MemberCard，我们想要：

使用一个占满全屏的Overlay
当click到卡片外部的区域时，关闭这张MemberCard
拥有Radix的各种功能，例如无障碍，Esc退出等等。

import * as Dialog from '@radix-ui/react-dialog';
import { motion } from 'framer-motion';
import { MemberInfo } from '@/types/MemberInfo';
import MemberCard from './MemberCard';
import { VisuallyHidden } from '@radix-ui/react-visually-hidden';

interface CardDialogProps {
  isOpen: boolean;
  onClose: () => void;
  member: MemberInfo;
}

const CardDialog: React.FC<CardDialogProps> = ({ isOpen, onClose, member }) => {
  return (
    <Dialog.Root open={isOpen} onOpenChange={onClose}>
      {/* Portal负责把这个组件送出dom，通常在body的下方。
      这样它就不会受到事件冒泡和父元素CSS（例如z-index）等的影响。 */ }
      <Dialog.Portal>
        {/* 透明的Overlay，记得设置覆盖全屏。 */ }
        <Dialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50"/>
        {/* 为了将Dialog Content居中，这里需要一个div来做flex styling。它的大小也是充满全屏的。 */ }
        <div className='fixed inset-0 z-50 flex items-center justify-center'>
          {/* 将组件包裹在这里。注意Content要和组件一样大。
          这样才能触发onPointerDownOutside，达到点击背景退出的效果。 */ }
          <Dialog.Content className="w-3/4 max-w-7xl outline-none" onPointerDownOutside={onClose}>
            {/* Radix的Dialog必须存在Title来触发无障碍。这里我们用VisuallyHidden隐藏。 */ }
            <Dialog.Title asChild>
              <VisuallyHidden>
                {member.name} personal information
              </VisuallyHidden>
            </Dialog.Title>
            
            {/* 卡片容器 */}
            <motion.div
              initial={{ scale: 0.3 }}
              animate={{ scale: 1 }}
            >
              <MemberCard {...member} />
            </motion.div>
          </Dialog.Content>
        </div>
      </Dialog.Portal>
    </Dialog.Root>
  );
};

export default CardDialog;

然后就可以快乐解决了！

另外，虽然这里用了workaround，但是其实非常多的东西都可以用shadcn-ui解决，感觉它覆盖了95%以上的日常开发需求。

前端学习：开发游戏公会的PR Page中学到的

Sat, 01 Feb 2025 07:30:04 +0000

最近找到工作之后心血来潮地想学一下前端，第一个想自己做一些漂亮的网页，第二个是作为后端了解前端在做什么可以更好地了解整体的landscape。

正好自己之前为所属的mmo公会(BP你死的好惨啊.jpg)做过一个网页，但是当时的网页是直接抄的模版，所以基本上就是填入想要的东西就可以，主要的学习点是用Cloudflare。所以这次就决定从零做起。

1. 技术选型

前端库: React with Typescript （后期转向了Next.JS框架）
框架: Next.JS
CSS: Tailwind
UI库: shadcn/ui
UI动画: motion
云服务: Cloudflare

考虑到这个app不需要任何的后端逻辑，只是一个展示用的app，而且想接触到稍微不太难的底层，所以使用了这个组合。虽然到后期熟悉了一些React之后，还是投入了Next.JS。

说起来，前段时间在学校的时候另一位同学和我猛猛吐槽tailwind，但是一把梭真的好爽啊尤其是对于没有学过前端的人而言。

此外，Cloudflare真的是拯救了穷穷的我。

2. Style component的基本思路

这是我第一次使用tailwind或者说正经地学习css，并且确实是我觉得最痛苦也最烦躁的一部分之一。还好我们有tailwind。

相应地，总结了一部分思路，个人觉得参照这些思路就可以决定自己需要哪些properties了。

2.1 定位方式

HTML的默认定位方式是static，也就是说元素会按照文档流正常排列，不受定位影响。

所以如果想改变位置，必须指定 relative? absolute? fixed? sticky?。这些决定了你定义component的坐标参考。值得一提的是absolute的参考是第一个**非static**的ancestor。

例如说，当你需要覆盖屏幕的overlay的时候就用fixed，它给出的坐标系就是整个视窗，随后再使用inset-0即可。

2.2 Flexbox, grid, container

决定你的容器类型。

flex和grid就不多赘述了，个人感觉要多加使用。例如想要调整唯一元素居中的时候，相比于自己硬写，用justify-center更加鲁棒。

container是tailwind提供的一种可以动态防止你的容器撑到屏幕两端的容器，一般在style全页级的容器的时候很好用。

2.3 位置与大小

接下来就是决定component的位置和大小。

值得注意的是，当设计component的时候不要规定component本身的大小，而应该设计component内部的响应式布局。至于component本身的大小，应当交给其父元素用围绕它的<div>块级元素来进行指定。 component本身使用w-full等适应其父元素，个人觉得会更好。

此外，在使用比例大小和基于vw，vh的大小时有些时候还是要善用max或者min的。它可以防止元素变得过小，也可以防止变得变得过宽盛满元素。这个确实是新的知识，人的视野其实只能集中在屏幕上的一部分，文字太宽的话，会变得难以阅读。

2.4 Padding和Margin

这个就不多赘述了。一般而言p-4(1rem)是一个不错的开始点。

2.5 背景颜色

简单的背景颜色调整不再赘述。

一个很不错的functionality是tailwind的bg-gradient-to-*，可以很愉快的构建出渐变色彩。

此外，透明度也可以很方便地调整。对于颜色是*-color-*/[alpha]，比如说from-gray-900/50。opacity-*也可以帮助调整。

2.6 阴影/圆角/边缘等装饰

Tailwind提供了非常好的rounded-*，border-*和shadow-[size], shadow-[color] 等utilities可以来美化元素。

2.7 图片等的处理

虽然严格上并不算是css相关，但是在处理用Next框架的图片的时候，有一些必要的东西需要知道。

把next/image的Image包在<div>中，再用块级元素去调整它的大小。内层的图片加上fill即可，fill会使得next将图片填满父容器。
object-position和object-fit决定了可替换元素(replaced elements) 在其所占据的box中的位置。可替换元素指的是像图片这种无法被css stylesheet影响到其本身的元素。所以对于图片，视频而言非常重要。

对于object-fit，常用的主要是object-cover（不变形覆盖，无黑边但是会被crop）和object-contain（不变形，完整展示，但是有可能产生黑边）。

需要立刻展示的图片不要忘记了priority
关于sizes，可以使用响应式，因为Next会自动调整fetch的图像的大小。一个栗子是：sizes="(min-width: 1080px) 100vw, 1080px。这样图片就会至少是1080p。

2.8 动画效果

复杂的动画效果建议使用motion库。但是简单的onhover，tailwind的hover:scale-105等等的utility很好用。具体你需要transition-transform duration-500 hover:scale-110的combo。 (transition-transform使得转换变得平滑。)

其他的就是少用的东西了，可以随时查询调整。

总结起来就是五大基础：位置，大小（包括padding/margin的大小），颜色，装饰，动画。图片需要多考虑一下可替换元素的特殊性质和图片的优化。

3.一些问题的解决方法

中途碰到了一些不熟悉的实现在这里也记录一下。

3.1 导入新字体并使用tailwind

下载新字体，并把woff2打包好放在public中。
去global css中设置好font face。
去tailwind.config.ts的theme中添加font family。别忘记加上default themes里面的sans。

3.2 预加载所有的图片后再展示

因为PR page是一系列的图片轮流播放，并且头图比较大，所以有些用户会看到一个碎裂的图像加载出来（网速烂的时候）。

自己想到的解决方法是preload完所有的hero image才开始展示。贴个代码。

    // ...之前的代码
    const [currentIndex, setCurrentIndex] = useState(0);
    const [isInitialLoadComplete, setIsInitialLoadComplete] = useState(false);

    // 在背景第一次进入DOM后预加载，并且通过isInitialLoadComplete来控制。
    useEffect(() => {
        const preloadAllImages = async () => {
            // 封装为Promise，将其加载到浏览器内存。
            const loadPromises = backgroundImagesPath.map((path) => {
                return new Promise<void>((resolve) => {
                    const img = new Image();
                    img.src = path;
                    img.onload = () => {
                        resolve();
                    };
                });
            });

            // 等待全部预加载完毕。
            await Promise.all(loadPromises);
            // 发送预加载信号。
            setIsInitialLoadComplete(true);
        };

        preloadAllImages();
    }, []);

    useEffect(() => {
        if (!isInitialLoadComplete) {
            return;
        }

        // 预加载之后才开始播放轮换动画。
        const interval = setInterval(() => {
            setCurrentIndex((prev) => (prev + 1) % backgroundImagesPath.length);
        }, backgroundShiftIntervalSeconds * 1000);

        return () => clearInterval(interval);
    }, [isInitialLoadComplete]);

3.3 渐变切换的做法以及注意点

轮播的时候图片需要渐变隐出，与此同时下一张图片渐变进入。

这个效果我们可以用framer motion来实现。motion.div可以指定退出的动画。

需要注意的点是，因为motion.div退出的时候，如果直接将其从DOM上移除，那么就不会有退出动画了，会直接消失。

motion的方法是将你要添加退出动画的元素一定要包在一个<AnimatePresence>中。观察DOM可以发现，当元素被卸载时，它会存在这个Presence中一小段时间，直到动画结束才会被卸载。

此外必须要提醒的是，在<AnimatePresence>中存在的元素，一定要一个key。 motion通过检测这个key知道哪些元素发生了变化，从而进行animate。

放一个代码！

useEffect(() => {
        // Wait for initial load to complete
        if (!isInitialLoadComplete) {
            return;
        }

        const interval = setInterval(() => {
            setCurrentIndex((prev) => (prev + 1) % backgroundImagesPath.length);
        }, backgroundShiftIntervalSeconds * 1000);

        return () => clearInterval(interval);
    }, [isInitialLoadComplete]);

    return (
        <div className="relative h-screen w-full overflow-hidden bg-[#190157]">
            <AnimatePresence initial={false}> {/* initial 控制一开始就有的元素是否播放动画 */}
                {isInitialLoadComplete && (
                    <Background
                        key={currentIndex}
                        backgroundImagePath={backgroundImagesPath[currentIndex]}
                        backgroundShiftTransitionDuration={backgroundShiftDurationSeconds} />
                )}
            </AnimatePresence>
        { /* 其他的代码 */ }
    )

3.4 Next的Server-side component与Motion的问题

因为知识不足，被这个坑了老大一把。

Next默认是用React Server Component，所以在使用Motion的时候无法完全兼容，Animate Presence的时候存在glitch。

原因是因为motion使用了effects，这些只有在client端才有。

解决方法是’use client’。

3.5 关于shadcn/ui

可以去globals.css中设置theme colors，非常适合决定好一套颜色之后在全网页通用使用，可以维持审美的一致性。

以上！

这个项目做了三四天，作为小白有不少的收获，记录一下。

关于java数据层的一些想法

Sun, 06 Oct 2024 10:05:57 +0000

今天看了一下java语言是如何访问数据库的，结果被内容和rather verbose的语法冲的头昏脑胀（？）

记录一下我自己对于java数据层结构的一些理解（希望以后不要被自己错误的理解打脸x）

（以及，我会感觉很多语言的数据层结构的philosophy是一样的，所以这个也有助于用来理解其他语言的数据层结构）

最底层：JDBC和HikariCP连接池

JDBC是java访问数据库的标准接口。JDBC提供了一套访问数据库的API，可以通过JDBC来访问数据库，执行SQL语句，获取查询结果等。

它的实现是通过JDBC驱动程序来实现的，不同的数据库有不同的驱动程序。

连接是一个昂贵的资源，所以我们需要有效率地复用连接。连接池解决了这个问题，当需要连接的时候，从连接池中获取连接，使用完毕后，将连接放回连接池。HikariCP是目前常用的一个高性能的连接池。

Hibernate和JPA

聊Hibernate之前得先聊聊JPA。

JPA规范定义了java的对象关系映射（ORM）的标准，将对象映射至数据库的表。它使用Entity Manager来向数据库中CRUD对象，而不需要亲自编写JDBC或者SQL语句。它也提供了查询语言。

（当然它也定义了不少其他的东西）

Hibernate是一个ORM框架，不仅实现了JPA规范，还提供了一些其他的功能。Hibernate可以通过注解来定义实体类和数据库表之间的映射关系。

DAO

DAO（Data Access Object）是一个数据访问对象，用于访问数据库。它提供了一些方法，用于CRUD数据库中的数据。

举一个简单的例子

public interface UserDao {
    User getUserById(int id);
    void insertUser(User user);
    void updateUser(User user);
    void deleteUser(int id);
}

这样用户就不用关心数据库的操作，只需要调用DAO的方法即可，有利于解耦。但是事实上在不少的情况下，service直接操作数据库也是可以的。

Spring的事务管理(Transaction Management)

虽然有点离题，但是spring通过实现一些Transaction Manager来实现事务管理，这样可以保证一组操作要么全部成功，要么全部失败（如果不熟悉事务，可以去看看ACID）。Spring在事务扔出RuntimeException的时候会自动回滚。

所以通常我们建议在处理事务时派生RuntimeException，这样就不用再去手动处理了。

举个栗子：

@Transactional
public void transfer(int from, int to, int amount) {
    User user1 = userDao.getUserById(from);
    User user2 = userDao.getUserById(to);
    user1.setBalance(user1.getBalance() - amount);
    user2.setBalance(user2.getBalance() + amount);
    userDao.updateUser(user1);
    userDao.updateUser(user2);
}

另外注意，在Spring中事务默认是具有传递性的。

也就是说在一个transactional的方法中调用另一个transactional的方法，那么这两个transaction会被合并成一个transaction来执行并共同commit或者rollback。

或者，引用一下廖雪峰老师的精确说明：

“Spring的声明式事务为事务传播定义了几个级别，默认传播级别就是REQUIRED，它的意思是，如果当前没有事务，就创建一个新事务，如果当前有事务，就加入到当前事务中执行。”

二分查找以及一道过去没想明白的题

Tue, 01 Oct 2024 08:50:45 +0000

首先这并不是一篇关于二分查找的算法解析，更多的是一篇碎碎念。事实上已经有超级多比我厉害的大佬写过关于二分查找的教程了。

本篇碎碎念的思考来源来自于这里：

知乎-David Hobbes-聊聊一看就会一写就跪的二分查找

如果你对我这篇博文一头雾水可以先看看这篇文章。

关于二分的适用范围

上面那篇文章给出了我觉得非常精妙的精准定义：

映射：存在一个映射$f$，映射$x$的值为一个布尔值，表示$x$是否满足某种性质。

单调：设false < true，对于所有的$x，y$，如果$x < y$，则$f(x) \leq f(y)$。

非常重要！这个性质可以让二分查找同样适用于单调递减的序列。

指针不变性：划定一个待查找区间[l, r)，其满足：$f(l-1)$为false，$f(r)$为true。

目标：找到最小的$x$，使得$f(x)$为true。

只有满足这样的问题你才可以使用公式化的二分：

def bisect(arr, l, r, condition):
    while l < r:
        mid = l + (r - l) // 2
        if condition(mid):
            r = mid
        else:
            l = mid + 1
    return l

作者也给出了一个正确性的证明。有兴趣的可以去看看。

旋转数组的最小值

为什么会谈论起这个问题呢，是因为当时一直想用上面的那个二分模版来解决这个问题。

当时忙活了好一阵子，最后得出的结论是好像这个问题并不能用这个体系来套用。

我们来分析一下这个问题吧。先将问题摘录在这里：

有一个长度为 n 的非降序数组，比如[1,2,3,4,5]，将它进行旋转，即把一个数组最开始的若干个元素搬到数组的末尾，变成一个旋转数组，比如变成了[3,4,5,1,2]，或者[4,5,1,2,3]这样的。请问，给定这样一个旋转数组，求数组中的最小值。

我们要寻找的是第一个满足条件的元素。如果各个元素都不相同，那其实这也是符合上面的套路的条件的。

具体而言我们的condition是：

选定数组的第一个元素作为pivot。
我们需要找到的是第一个小于pivot的元素。
这样，整个数组可以被映射至一个布尔条件，并且其符合单调性。（左边大于等于pivot，右边小于pivot）

遗憾的是，这个数组是非降序的。我们来画一张图来表示这个数组的情况。特别的，我们将原来没有rotate过的数组的三个部分拿出来，它们是：>pivot, <pivot, =pivot。

旋转过后，这个数组便不再遵从单调性了。

进一步思考

那么是不是说明说这种通用思路完全无法使用呢？

不一定。请允许我引用原作者对于这个问题的正确性证明（数学归纳法）：

当d = r - l = 0时，代码不会进入for循环，直接返回l。由问题严格陈述的第3点我们知道f(l - 1) = false和f(r) = true，又因为此时l = r，所以直接返回l就是正确的答案。

假设对于所有的d = 0, 1, 2, …, k - 1，该算法都能返回正确的答案l。那么当d = k时，代码将会进入for循环，此时中点m ∈ [l, r)。这时候分两种情况：

如果f(m) = false，我们令l = m + 1，此时依然满足问题严格陈述的第3点(划定一个待查找区间[l, r)，其满足：$f(l-1)$为false，$f(r)$为true)，但是区间长度d变小了。

如果f(m) = true，我们令r = m，此时同样满足问题严格陈述的第3点(划定一个待查找区间[l, r)，其满足：$f(l-1)$为false，$f(r)$为true)，但是区间长度d也变小了。

仔细观察可以意识到，如果mid落在>pivot或者<pivot的区间内，那么并不影响该证明的正确性。该算法所划出的查找区间，仍然包含了最小值的分界点。

关键在于，当mid落在=pivot的区间内时事情就变得拧巴了。

这种情况其实还是完全没有问题的，因为我们的condition是<pivot, 仍然符合单调性。

这种情况就不太行了。此时，由于mid=pivot不符合条件，我们应当将搜索范围缩小至右边。不幸的是，在第二种情况中右边并没有我们的答案。

观察这种情况，我们发现它的表达方式是nums[left] == nums[right] == nums[mid]。这种情况下，我们无法判断最小值在哪一边。

事实上官方的答案是在这种情况下逐渐缩减右边界by 1。其实这样从图上也好理解，把右边的等于部分压没了之后，就会退化成图1的状态。

但是这样的算法是O(n)的。既然这样，不如在这个区间内直接暴力搜索。（这也是剑指offer的解法XD）

以下是我的代码：

class Solution:
    def minNumberInRotateArray(self , nums: List[int]) -> int | None:
        if not nums:
            return None
        # The array is not rotated at all
        if nums[0] < nums[-1]:
            return nums[0]
        pivot = nums[0]
        l, r = 0, len(nums) - 1
        while (l < r):
            mid = l + (r - l) // 2
            if (nums[l] == nums[r] and nums[l] == nums[mid]):
                return self.sequentialSearch(nums, l, r)
            if (nums[mid] < pivot):
                r = mid
            else:
                l = mid + 1
        return nums[l]
    
    def sequentialSearch(self, nums, l, r):
        return min(nums[l: r+1])

剑指offer 2.3.1-2.3.2 数组/字符串

Fri, 27 Sep 2024 05:39:34 +0000

之前一直是拿LCR来练，最近把剑指offer的实体书买了。边看边练。

关于数组

数组相关的题目主要涉及到了两个概念。

把数组当作哈希表

数组的寻址是O(1)的，所以可以把数组当作哈希表来用。

然而，这时候的key也只能是int。

具体到这一题的优化： JZ3 数组中重复的数字

本来我的解法是再创建一个哈希表。然而，考虑到数组中的元素只会存在于0～n-1之间，所以可以直接把数组当作哈希表来用。

它的核心便是尝试将对应的数字转移到对应的位置上。（例如，2应该在下标2的位置上）

如果该位置上已经存在了“正确的数”（也就是，已经存在了2），那么就说明这个数是重复的。

这个和用哈希的if num in num_set的本质是一样的，但是我们只使用了O(1)的空间。

如果要求不改变原来的数组

使用广义的二分查找。

取取值的中点，随后计算小于等于中点的数的个数和大于中点的数的个数。如果小于等于中点的数的个数大于中点，那么重复的数在左边；否则在右边。

字符串

事实上就讲述了一个从右到左的操作。

对于一个定长的数组（字符串也是数组的一种），如果从左到右复制（例如说，替换不同长度的字符串的时候），会需要把后面的元素整块多次移动，复杂度会到O(n^2)。

这个时候，可以考虑从右到左复制。先扩张出足够的空间，然后准备一个读指针和一个写指针，从右到左复制。

具体请看: JZ5 替换空格

CPP Primer Reading Note - Ch.2 (Variable and Elementary Types)

Thu, 26 Sep 2024 06:28:54 +0000

Chapter 2 mainly talks about variables and elementary types in C++.

Except for some knowledge that is common for most languages, here are some interesting things I would like to make notes of.

Object

Although many conventions about the meaning of object exist, in C++:

An object is a region of memory that can hold values of a given type.

So “variables” can be regarded as “objects”.

Understanding this can be extremely helpful for further studies.

Reference and pointer

A reference is an alias of an object that must be initialized. A reference is not an object.
A pointer is an object (indeed! It has a memory space, an address and has type.) that can point to another object.

Top-level const and low-level const

Top level const: const int a = 1;
- The const applies constant constraint to the object (top level).
- So the value of a cannot be changed.
- For pointers: int *const ptr = ...
  - The pointer itself is a constant, so the address it points to cannot be changed. But the value of the underlying object can be changed.
Low level const: const int *ptr = ...
- The const applies constant constraint to the object the pointer points to (low level).
- So the value of the object cannot be changed through the pointer.
- IMPORTANT but it doesn’t mean the object itself is a constant. The object can be changed through other means. Imagine that the pointer or the reference “thinks” that the object is a constant, so it refuses to change the object through itself - but the underlying object could be changed through other ways.

Right-to-left reading rule

const int *ptr
- Read from right to left: ptr is a pointer to a constant integer
int *const ptr
- Read from right to left: ptr is a constant pointer to an integer

`constexpr` and `decltype`

constexpr is a specifier that indicates that the value of the variable or function can be evaluated at compile time.
decltype is a specifier that indicates the type of the variable or expression.

About headers

In C++, the header usually contains the declaration of consts, constexprs, and class definitions (because they should only be defined once). The constraints of defining only once can be achieved by using the #ifndef directive.

Scope of const

const has the default scope of a file. If you want to use the const across multiple files, you should use the extern keyword both in the declaration and definition.

Notes about poetry

Sat, 14 Sep 2024 03:52:17 +0000

Why Poetry?

Aside from the traditional requirements.txt / setup.py and conda solutions, Poetry is a modern Python packaging and dependency management tool that leverages the pyproject.toml file to manage dependencies and build packages.

Why `pyproject.toml`?

To start with poetry we must first introduce the pyproject.toml file. This file is a configuration file that is used to manage the dependencies and build process of a Python package. It is a modern alternative to the setup.py file. (Check PEP 518 for more information.)

As a simple example, here is a pyproject.toml file that is generated from poetry:

[tool.poetry]
name = "awesome-package"
version = "0.1.0"
description = "An awesome package"
authors = ["Your Name <youremail@example.com>"]
license = "MIT"
readme = "README.md"
homepage = "https://github.com/username/awesome-package"

[tool.poetry.dependencies]
python = "^3.8"
numpy = "^1.20.0"
requests = "^2.25.0"

[tool.poetry.dev-dependencies]
pytest = "^6.0"
black = "^22.0"

[build-system]
requires = ["poetry-core"]
build-backend = "poetry.core.masonry.api"

In order to do the same with setup.py, you need to write:

from setuptools import setup, find_packages

setup(
    name="awesome-package",
    version="0.1.0",
    description="An awesome package",
    author="Your Name",
    author_email="youremail@example.com",
    license="MIT",
    packages=find_packages(),
    install_requires=[
        "numpy>=1.20.0",
        "requests>=2.25.0"
    ],
    extras_require={
        "dev": [
            "pytest>=6.0",
            "black>=22.0"
        ]
    }
)

The pipeline is actually mixed with python code, which is not very clean. pyproject.toml on the other hand provides a cleaner and more structured way to manage dependencies and build process.

Functions

Poetry not only handles the dependencies, but also creates a virtual environment automatically, builds the package, and (potentially) publishes it to PyPI through a unified interface.

Some functionalities include:

poetry new: Create a new Python package.
poetry install: Install dependencies based on the pyproject.toml file. This also creates a virtual environment.
poetry add <package>: Add a new package to the dependencies.
poetry remove <package>: Remove a package from the dependencies.

It also enables switching between dev and production environments.

poetry install --only main: Install only the production dependencies.
poetry add --group dev <package>: Add a new package to the development dependencies.

The new poetry uses --group instead of --dev.

Poetry virtual environment

One key feature that is not so intuitive is that poetry automatically creates a virtual environment for each project.

In-project virtual environment

The virtualenv is usually stored in some system folder, but you can also let it init a .venv folder in your project root by setting virtualenvs.in-project option to true:

poetry config virtualenvs.in-project true

Running the scripts

Some may find that if they directly run the script, the dependencies are not found. This is because the virtual environment is not automatically activated, so you need to run the scripts in the virtual environment by prefixing the command with poetry run:

poetry run python my_script.py

or, you can create a shell in the virtual environment, and run the scripts in the shell:

poetry shell
python my_script.py

Configuring in vscode

If you are using the in-project virtual environment, vscode will automatically configure it for you.

If not, you can manually set the python interpreter to the virtual environment by clicking on the python version at the bottom.

First, use poetry to find the path of the virtual environment:

poetry env info --path

Then, in vscode:

Click on the python version at the bottom, and select “Enter interpreter path”.
Paste the path of the virtual environment and select the python executable.

About environment info

If you run poetry env info, you will see two parts: “Virtualenv” and “Base”. The “Virtualenv” part is the virtual environment of the project, and the “Base” part is the system global python environment.

Small review on CSS

Sat, 07 Sep 2024 02:07:34 +0000

Though I am not currently proficient in frontend, I do sometimes have to get in touch with HTML/CSS when setting up static pages. Here is some personal note on my recent refresh on CSS (last time I touched it is during my undergrad🫠).

CSS box model

Important concepts include margin, border, padding, and content. Here is a nice illustration from Wikipedia:

Float

Float is a CSS property that specifies whether a box should float to the left, right, or not at all in its parent container. It is commonly used to wrap text around images. Understand it as putting the element “out of the normal flow”.

Psuedo-classes

Psuedo-classes are used to define the special state of an element. For example, :hover is used to define the style of an element when the mouse is placed over it.

a:link {
    color: blue;
}

a:hover {
    color: red;
}

CSS Animations

The @keyframes rule is used to create animations, where the percentage is the time during the animation. For example, the following code will change the background color of an element from red to yellow to blue to green.

@keyframes example {
    0% {background-color: red;}
    25% {background-color: yellow;}
    50% {background-color: blue;}
    100% {background-color: green;}
}

You can also alter the timing function of the animation using the animation-timing-function property, like ease, linear, ease-in, ease-out, cubic-bezier() family, etc.

Responsive layout

Media queries

Media queries are used to apply different styles for different devices, using different breakpoints. The following code will change the background color of an element to yellow when the screen width is less than 600px.

@media only screen and (max-width: 600px) {
    body {
        background-color: yellow;
    }
}

Relative units

In introductory courses px is usually used as the unit of length, but there are a bunch of other units out there that are more responsive. Those incl.:

vw and vh: 1% of the viewport width and height, respectively.
em: Relative to the font-size of the parent element.
rem: Relative to the font-size of the root element.
vmin and vmax: 1% of the viewport’s smaller and larger dimension, respectively.
%: Relative to the parent element.

Logical pixels

I have once thought that how can media handle tablet displays on iPad’s retina or other high-resolution tablets.

Logical pixels is an encapsulation of the physical px in CSS, where device-pixel-ratio is the ratio of physical pixels to logical pixels. This allows for high-resolution displays to display content at a higher resolution without changing the layout of the page.

Leetcode LCR. 001 两数相除

Fri, 06 Sep 2024 02:34:34 +0000

给他们一点小小的简单题震撼！

题目

给定两个整数 a 和 b ，求它们的除法的商 a/b ，要求不得使用乘号 ‘*’、除号 ‘/’ 以及求余符号 ‘%’ 。

注意：

整数除法的结果应当截去（truncate）其小数部分。

例如：truncate(8.345) = 8 以及 truncate(-2.7335) = -2

假设我们的环境只能存储 32 位有符号整数，其数值范围是 $[−2^{31}, 2^{31}−1]$。

本题中，如果除法结果溢出，则返回 $2^{31} − 1$

示例 1：

输入：a = 15, b = 2
输出：7
解释：15/2 = truncate(7.5) = 7

示例 2：

输入：a = 7, b = -3
输出：-2
解释：7/-3 = truncate(-2.33333..) = -2

示例 3：

输入：a = 0, b = 1
输出：0

示例 4：

输入：a = 1, b = 1
输出：1

二分查找的变式

首先对于菜菜的我第一步二分查找我就没想到，不如说看着这个题目第一眼是摸不着头脑的。

既然我们谈到了二分，那么我们先复习一下吧。一个通用的二分查找模型将一个搜索范围划分为三个部分，其中[0, bisect_left) 为小于目标值的部分，[bisect_left, bisect_right) 为等于目标值的部分，[bisect_right, END) 为大于目标值的部分。

现在我们需要的是魔改一下判断的标准为 mid * b 与 a 的大小关系。我们要求的正是“小于等于目标值的范围的最大”，也就是bisect_right - 1。由于除法可以拿到负数，所以我们需要用a和b的绝对值来处理，最后返回的时候，根据 a 和 b 的符号来判断结果的符号。

我们先把overflow放到一边，乘号的限制也放到一边，写一个非常naive的解。然而，请注意二分查找的模板。

import math

class Solution:
    def divide(self, a: int, b: int) -> int:
        INT_MAX = 2**31 - 1
        INT_MIN = -2**31

        def sgn(num):
            if num == 0:
                return 0
            elif num > 0:
                return 1
            else:
                return -1
        
        def clamp(num):
            if num > INT_MAX or num < INT_MIN:
                return INT_MAX
            return num
        
        # ===== 这一部分是主要的二分查找部分 =====
        left, right = 0, abs(a) + 1
        # Get bisect_right
        
        while left < right:
            mid = left + ((right - left) >> 1)
            if mid * abs(b) > abs(a):
                right = mid
            else:
                left = mid + 1
        # ========================================
        result = left - 1
        return clamp(result * sgn(a * b))

二分查找的伪代码可以总结为：

# 采用Dijkstra的左闭右开 [left, right)
while 仍有搜索空间 (left < right)：
    # 这个表达式在偶数元素时取得右中点。
    取得中点 mid = left + (right - left) // 2
    if (mid满足分割点以及分割点以右应当满足的条件)：
        right = mid
    else：
        left = mid + 1
    return left

以以上的题解作为例子。我们需要找到的是bisect_right。思考bisect_right的性质，[bisect_right, END) 为大于目标值的部分。所以，分割点以及分割点以右应当满足的条件 为 num * abs(b) > abs(a)。

在逻辑上有一个相当反直觉的地方在于，=target的时候，为什么会把一个左闭右开的区间的right放在上面。这样岂不是否定了mid本身就为边界的可能？

我的理解是这是因为loop的退出条件是left < right，并且return值为left。如若mid本身真的为边界，那么left最终将会等于right，此时它会重新回到mid上。这与数学直觉并不相符，因为[a, a+1)本身就说明这个整数为a，然而程序的退出点却是[a, a)。你也可以将其视为“程序应当检视的空间”，因为程序已然知道mid是可能解之一，所以自然地把它排除至需要检视的区域外。

我们来设想一个如果不这样做会导致的死循环。

bisect_left(arr, 6)
arr = [..., 5, 6, 7, ...]
            ^  ^  ^
            |  |  |
            l mid r

如果我们要尝试寻找bisect_left，且update rule是right = mid + 1，也就是将mid继续放在搜索空间中时，这个程序会陷入死循环：它会一直把r放在7上。（回忆算法：if (mid >= target) 则压缩右侧空间。）

快速幂/快速乘

前面的二分查找需要用到乘法。有什么办法可以不用乘法呢？

先介绍一下简单的快速幂。快速幂是一种减少乘法次数的方法，它的核心思想是将指数n拆分为二进制的形式，然后利用二进制的性质来减少乘法次数。

例子：$2^{10} = 2^8 * 2^2 = 256$

我们并不需要将2连续乘10次。我们可以先算出$2^2$，然后再算出$2^4$，再算出$2^8$，最后再乘上$2^2$。

这个算法有一个对应的二进制的表达形式。$10 = 1010_2$。我们可以看到第3位和第1位是1，所以我们只需要计算$2^{2^1}$和$2^{2^3}$，然后相乘即可。

事实上，通过同样的方法，我们可以同时解决这题的“不用乘除法”的要求。我们试想这么一个过程。

a = 19, b = 3
计算b的偶数次倍数，直到其是小于等于a的最大值。3, 6, 12
- 可以将他们视为：$3 * 2^0, 3 * 2^1, 3 * 2^2$
逆序遍历他们以分解a。
- 19 - 12 = 7
- 7 - 6 = 1
- 1 已经小于3了，所以结束。
现在，a可以被表达为：$3 * 2^2 + 3 * 2^1 + \delta$
- $\delta$是a除以b的余数，根据题意舍去。
它除以3的结果便是：$2^2 + 2^1 = 6$

注意到这种快速乘是不需要真正用到乘法的，数的翻倍可以通过自加来实现。

Overflow问题

事实上我们目前还尚未解决溢出的问题。题目对于int的范围有所要求。用python没有正面的解决这些问题。

1. 范围不对称问题

这歌问题的第一个tricky点在于int范围并非对称，而我们的算法包含正负数。所以，第一步是将所有的数投射到负数区间（因为正数的最大值取负仍在范围内，反之则不然）。

2. 考虑特殊情况

我们考虑数的边界。注意到，我们全部的操作都是在负数区间进行。所以我们主要考虑INT_MIN的情况。

如果被除数是INT_MIN，那么
- 当它除以-1时会越界。此时我们应当返回INT_MAX。
- 当它除以1时，result累加可能会越界。所以我们应当返回INT_MIN。
如果除数是INT_MIN，那么
- 如果被除数是INT_MIN，那么返回1。
- 其他时候，应当返回0。

3. 累加的越界

注意到我们累加的时候很有可能在最后一步检查该数是否大于a的时候越界，所以，我们需要稍稍改变一下写法：

b + b <= a => b <= a - b

两个负数的差是不会越界的。

算法实现

leetcode平台的int恰好就是32位的。我们折磨一下自己，写一个C版本。

#include <limits.h>

int divide(int a, int b){
    // In LC the int is 4-byte 32 bit int.
    if (a == 0)
        return 0;
    // Special cases
    if (a == INT_MIN){
        if (b == -1) {
            return INT_MAX;
        }
        else if (b == 1) {
            return INT_MIN;
        }
    }
    else if (b == INT_MIN) {
        if (a == INT_MIN)
            return 1;
        else
            return 0;
    }
    // Get sign
    int sgn_rev = 0;
    // Transform to negative
    if (a > 0) {
        a = -a;
        sgn_rev = !sgn_rev;
    }
    if (b > 0) {
        b = -b;
        sgn_rev = !sgn_rev;
    }
    // Define the b-array, has upper limit 32
    int b_arr[32];
    // Check if b_temp + b_temp < a
    int b_temp = b;
    b_arr[0] = b_temp;
    int b_arr_ptr = 1;
    while (b_temp >= a - b_temp) {
        b_temp += b_temp; // Will not overflow since the check is done in while
        b_arr[b_arr_ptr] = b_temp;
        b_arr_ptr++;
    }
    // Reverse back
    int result = 0;
    for (b_arr_ptr-=1; b_arr_ptr>=0; b_arr_ptr--) {
        int subtract_unit = b_arr[b_arr_ptr];
        if (a > subtract_unit)
            // Subtract unit too big
            continue;
        a -= subtract_unit;
        result += (1 << b_arr_ptr); // Shift for power
    }
    if (sgn_rev)
        result = -result;
    return result;
}

总结

记录这个题目主要是因为它复习到了很多的知识点：

它涉及到了一个二分查找的实现，帮助复习了二分。
- 事实上，原题实现了一个基于快速乘法的二分查找。但是解释的不是非常直观，我选择了第二种用空间换时间的方法。
它涉及了快速乘和快速幂的基本原理和活用。
它涉及了overflow和overflow的处理。

这道“简单”题坑还是好多的。

下次还填非常简单。

A skim through "K&R" - The C Programming Language (2nd Ed.)

Thu, 05 Sep 2024 14:10:27 +0000

0. Introduction

I came across with a lot of recommendations on one shall start their life in computer science with C/C++. Now, as a guy that have been programming in Python with empty brain since my undergrad CS intro course, I am finding myself asymptotically tending to the state of a diaobaoxia 调包侠, a term in Chinese that means a person that has minimum CS knowledge and finishes all his work on package APIs.

Even though I am not yet a C programmer, the motivation of reading this 1988 book is to “pay respect” to this language that has been the foundation of many modern tools. In other sense:

What is the, somehow, “minimum building blocks” of a programming language?
Learn to appreciate the evolution of the programming languages and many tools that I have been taking for granted.

Do note that this read is a simple skim.

1. Variables, Functions and Scopes

1.1 Variables

That was some time ago, but someday I suddenly asked myself:

What is a variable?

Although might be incorrect, currently I like to think of a variable as a synonym of a memory address, so that you do not need to memorize the hexadecimal itself. After all, down to the assembly, the system just fetch the data from the memory to the registers and write back (at a proper time).

1.2 Functions

Knowing “pass-by-what” is the most important when you learn a new language.

I really like the simplicity of “pass-by-value” in C. Everything passes by value. The essence of modifying the values inside a function is actually passing a copy of the pointer, and you modify what the pointer is pointing to.

Also, I am quite amazed how early a function with variable sized parameter lists was introduced. C can actually support this using the stdarg.h library.

1.3 Scopes and encapsulation

C is not an OOP language. However, there are some concepts that shed lights on later languages. This is actually encapsulation in its youth. Check out those concepts:

static
- If defined out of blocks: Local to the file, not visible to other files.
- If defined inside functions: Local to the func, the variable is not destroyed after the function is done.
const
- The variable is read-only.
extern
- A declaration without definition. The variable is defined in another file.

C provides encapsulation on the file level, and actually takes a strategy that is quite different from OOP languages today that those functions are visible to other files. To do encapsulation you have to use static explicitly. It makes sense if I imagine its way of merging all those files together into an executable…

1.4 Declarations and Definitions

Declaration: Tells the compiler about the type of the variable or function. Does not allocate memory.
Definition: Allocates memory for the variable or function.

Somehow it tells me what it means when I right-click in VSCode and it asks me whether I want to “Go to definition” or “Go to declaration”. Within the context of C it is more than clear.

2. Flow of control

C supports for, while, do-while, if-else, switch-case, and break and continue statements. Pretty much the same like other modern languages.

goto considered harmful? :)

The only thing I would like to take note is its explanation on the for statement.

for (initialization; condition; update) {
    // body
}

is equivalent to

initialization;
while (condition) {
    // body
    update;
}

which clearly solves any confusion of mine on the C style for statement. Thanks. :)

3. “The consistency”

As an analogy I would say that other languages are like cloud services while C is like on-premises. It somehow exposes the “bare metal” to you, but in a simplistic, consistent way.

Strings are arrays of chars terminated by \0.
Array names are pointers to the first element.
- When passed to a function, it decays to a pointer.
Functions are pointers to the entry point.

Pointers does give you headaches, but it really burns everything nearly down to its core - many things are essentially the same.

Extra: Complicated declarations

Complicated declarations is a kind of nightmare in C that you compose function parentheses, pointers, and arrays together. As an example:

void (*bsd_signal(int sig, void (*func)(int)))(int);

I really like this article on geeksforgeeks about how to read complicated declarations in C by using postfix notation.

Simply put, you expand the innermost parentheses first, and then move outwards. At each level, you first look at the variable name, then look right, then look left. This is far too abstract so please check out the article! It is a lot of fun… I hope?

4. Importing?

I do not really think much when I type:

import os

C does the task of pulling the code from other files (or, code from others) using preprocessor directives.

What it does is actually expands the code before the compilation.

#include: Expands the code from the file.
#define: Replaces the text with the defined text.

And, since those functions are visible to other files, a header would be fine to tell the compiler what functions to find.

Do notice that in C, duplicated definitions are not allowed. You kind of appreciate how great the invention of namespaces are.

5. How far is `struct` from `class`?

C does not have classes, but it has struct which is a way to group variables together. I sometimes think that how far away is it from a class in OOP languages.

After all, structs can store variables and even functions inside, and the way of accessing them (obj.var1) is quite similar to OOP languages.

#include <stdio.h>

// Function declarations
void greet() {
    printf("Hello!\n");
}

void farewell() {
    printf("Goodbye!\n");
}

// Define a struct with function pointers
struct Person {
    char *name;
    void (*greetFunc)();     // Function pointer for greeting
    void (*farewellFunc)();  // Function pointer for farewell
};

int main() {
    // Create an instance of Person and assign functions to function pointers
    struct Person p;
    p.name = "Alice";
    p.greetFunc = greet;       // Assign greet function
    p.farewellFunc = farewell; // Assign farewell function

    // Call the functions through the function pointers in the struct
    printf("%s says: ", p.name);
    p.greetFunc();

    printf("%s says: ", p.name);
    p.farewellFunc();

    return 0;
}

Nevertheless, this comparison is somehow meaningless, since structs are tend to be used for data storage. But it is intriguing to see the “sprout” of later languages.

6. Interact with the system

6.1 I/O

I/O in a broad sense can be regarded as a serial input and output, with system calls like lseek to provide random access. But nevertheless it is just like moving a pointer around in a file or to read byte-by-byte from a stream that you do not know where it ends. That’s why EOF is important.

6.2. Exceptions not at home?

It is the first time I know that C does not have built-in exception handling. It is quite a surprise to someone who have been taking try-except for granted.

I remember that the instructor in the Intro to CS in CMU has stressed on “checking the return value of system calls”. Now somehow I know the reasons better, since those kind of exceptions are reported by the return values.

This is probably also why separating the stdout and stderr, and do not reporting errors using print() is a good practice, since people used to have to analyze the return values manually and report the errors to the console.

6.3 Prototypes of formatting and access control

Think of python formatted string:

num = 5
print(f"Number is {num:9.3f}")
# Output: Number is     5.000

In C this is originated from the printf function, where after the % you can specify the width and precision of the output.

%<width>.<precision><type>
// You can also specify 
// left-justified 
// with a `-` before the width

Also think of python’s file access control:

with open("file.txt", "r") as f:
    print(f.read())

In C, you can specify the mode of the file access in the fopen function. There are r (read), w (write), a (append), and b added to those modes to specify binary mode.

FILE *f = fopen("file.txt", "r");

So, many things do have their roots in the history.

7. Epilogue

First, here is my very, very naive overview that I derived from the C language:

Variables
Functions
Operators
Flow of control: Conditionals and loops.
Memory management
Typing system
Set types: Arrays, structs (those types that store multiple variables)
Multiple files and compilation
I/O

Many modern languages do stem from this template, so you get to somehow know the new languages by first looking into this template and know how they operate, then investigate what problems they try to solve using this new language.

I remember a post that said “every time you read K&R after some growth in programming, you will find something new”. I did find many things new in this first quick pass, especially when I have been using high level programming languages for some time. It is like a journey back to the roots and solved many of my confusions. Just like artists have to learn the history of art, I start to think that understanding the low level languages, touching the fundamentals and somehow looking in the past makes you gain some knowledge on where you are standing right now, and peek into the essence of the machine before you.

Setting up Hugo static blog page

Fri, 23 Aug 2024 14:15:58 +0000

Problem setting

When I first tried to build up a blog, I have been thinking about renting a VPS and running a Wordpress instance on it. This is why you have seen the previous blog. But:

VPS costs you, sometimes payment is done annually in one installment.
In terms of a blog, dynamic nature of Wordpress is an overkill.
Have to setup TLS termination proxy, Wordpress and a MySQL instance. Heavy :(

I have seen some of my friends spinning up their blog using Hugo. With the static page hosting service (free!) by Cloudflare Pages, I have decided to give it a try.

In this blog, I’ll mainly talk about the subtle problems I have faced in these sessions besides trivial documentation.

How to setup a Hugo blog
Using the Stack hugo theme
Deploying to Cloudflare Pages
Setting up Front Matter CMS (Content Management System) for easy content creation in vscode

1. Setting up Hugo

Hugo is a static site generator written in Go that is blazingly fast. To start a new hugo project, simply follow the quickstart guide.

`archetypes` front matter template

Hugo uses front matter, a “preamble” in the markdown file to store metadata and control the behavior of the content. In fact here is the front matter of this blog:

---
title: Setting up Hugo static blog page
description: ""
date: 2024-08-23T14:15:58.493Z
preview: "" # This is for `Front Matter CMS`
draft: false
tags: []
categories: []
image: "" # This is for `Stack` theme, the header you have seen in this post.
slug: setting-up-hugo-static-blog-page
---

One (probably annoying thing) about Hugo is that it can use TOML, YAML or JSON for front matter. I like yaml but the default generated content with hugo new post/your-post.md is TOML. In addition, sometimes you do want the autogenerated files have different front matter according to the content type.

The solution is to open the archetypes folder and edit the default.md file, or create new ones such as post.md file. Hugo will match the templates according to the type, e.g. hugo new post/your-post.md will use the post.md template. Check the matching rules.

2. Using the `Stack` hugo theme

If I haven’t changed the theme after I have written this blog🤔, I am using the Stack theme. More than grateful for CaiJimmy for designing this elegant theme. It also has a nice documentation.

For those that would like to set up the frames quickly, here are some steps:

Go to the theme folder of the Stack theme (should be something like themes/hugo-theme-stack), find the config.yaml.
Find the params.sidebar section and fill in the details.

Stack provides menu items on the left and interesting widgets on the right side of the page. To setup those widgets you have to follow some steps:

Create those pages under the content/page folder. The theme relies on those pages to build the widgets.

content/page/archives/index.md

---
title: "Archives"
layout: "archives"
slug: "archives"
menu:
    main:
        params: 
            icon: archives
---

content/page/about/links.md

---
title: Links
links:
  <!-- This is a sample links page to Github. -->
  - title: GitHub
    description: GitHub is the world's largest software development platform.
    website: https://github.com
    image: https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png
menu:
    main: 
        params:
            icon: link

comments: false
---

<!-- To use this feature, add `links` section to frontmatter.
`image` field accepts both local and external images. -->

content/page/about/search.md

---
title: "Search"
slug: "search"
layout: "search"
outputs:
    - html
    - json
menu:
    main:
        params: 
            icon: search
---

Notes

You can also add the weight parameter to menu.main.params to change the order of the main menu items.

The icon parameter refers to the SVGs in assets/icons folder in your theme folder. For example, icon: archives refers to assets/icons/archives.svg.

After the creation of those pages, go to the config.yaml file in your theme folder. We first customize the left menu:

# Custom menu configurations
# The `icon` refers to the SVGs in `assets/icons` folder.
# `Stack` uses icons from tabler.io (https://tabler.io/icons), 
# which you can download for customization.
menu:
    main:
        - identifier: home
          name: Home
          url: /
          weight: 1
          params:
            icon: home
            newTab: false
    # Social menu doesn't have text, just a list of icons.
    social:
        - identifier: github
          name: GitHub
          url: <your-github-link>
          params:
            icon: brand-github
            newTab: true

params:
    widgets:
        homepage: 
            - type: "search"
            - type: "archives"
              params:
                limit: 5
            - type: "categories"
              params:
                    limit: 10
        page:
            - type: "toc"

This enables the menu items and widgets.

Fix the code block glitch

A glitch in the current version (Stack v3.26.0) is that the code block has a mysterious black background. This should be a temporary issue but here is the (official) fix:

Go to hugo.yaml (or hugo.toml, if you haven’t changed the configuration file format) in the project root.
Add:

markup:
  highlight:
   noClasses: false

3. Deploying to Cloudflare Pages

In normal circumstances deploying this stack to Cloudflare should be a smooth process.

The Stack v3.26.0 however breaks the Cloudflare automatic page building process, which is probably caused by using an old image version of Hugo. To fix this, in your page build configuration, add the environment variable:

# Change to the newest or compatible Hugo version at your reading time.
HUGO_VERSION=v0.133.0

and it should fix the issue.

4. Setting up Front Matter CMS

Front matter is a vscode extension that runs locally and manages your contents and does SEO. It has high flexibility but setting it up was a nightmare for me (due to my lack of coding skills 😭). Anyways, I provide some key setups aside from the general guidance Front Matter CMS provides, which itself is nice👍.

Markdown front matter template and page bundle support

One thing that you have to notice is that Front Matter does not respect the settings you provided in the archetypes folder. It uses its own template located inside the frontmatter.json generated.

Here is the modification I provide, with three augmentations:

Enable page bundle support.
- Page bundle is a way to organize your resources and an index.md in one folder. If you do not know what a page bundle is, check the Hugo documentation.
Added the slug field. Slug is very important in Front Matter since it use it to open the preview (which I cover in later sections).
Added the image field, which is used by the Stack theme.

Note

I regard it as a very INELEGANT modification since I directly modify the default profile, which I should create a new post profile or somehow.

But I mainly use CMS for writing posts, so, lazy me 🤷.

"frontMatter.taxonomy.contentTypes": [
    {
      "name": "default",
      // When generating page content, use a page-bundle format.
      "pageBundle": true,
      "fields": [
        // ...
        // This is for the header post image in `Stack` theme.
        {
          "title": "Post image",
          "name": "image",
          "type": "image"
        },
        // This is for automatic slug generation.
        {
          "title": "Slug",
          "name": "slug",
          "type": "slug",
          "editable": true,
          "default": "{{slug}}"
        }
        // ...
      ]
    }
  ],

Preview setup

Front Matter CMS uses the slug of the pages to generate the preview. What it actually does is:

Spins up a local server (you have to click the Start server button.)
Generates a link to the page you are currently working on, using the rules here. In short, <preview host URL>/<frontMatter.preview.pathName>/<slug>.
Open a browser based on the link.

It’s important to know that you have to setup the frontmatter.json correctly to use the preview feature. Also, you have to make sure that the preview pathname is correctly set. If not, it will access <hostname>/<slug> rather than, for example, <hostname>/post/<slug> (let’s assume you host posts under the content/post folder).

The difficulty is really to recognize the aforementioned fact - once you understand it it is not hard at all and it is well documented.

Check the documentation here to modify the generated frontmatter.json by adding previewPath property according to the instructions.

5. Epilogue

Let’s shift away from the technical story and talk about something rather personal.

Sometimes I do think trying new thing is a hard time, but it still provides that dopamine surge that supports you to work until five in the morning. I have had a long chat with one of my friend, on the essence of software engineering (I probably will write a blog afterwards on this topic). What he essentially said is that SWE is an art for solving the problems, and it really depends on your experience to know what is the best solution.

He is right, in my opinion. There are so many awesome tools out there waiting to be explored, although during the exploration I do have to bang my head against the wall just to compensate for my lack of knowledge. Spending for like 12 hrs to just setup a page and spending another 3 hrs to write a blog recording my mistake is “not a good time management”. But I do think it is worth it to left some record here just to make myself setting up the next blog easier. And, if I am lucky enough to have a reader like you🤗, hope this helps.

Using cloudflare to setup the server SSL/TLS

Fri, 23 Aug 2024 07:46:59 +0000

Problem

The motivation is simply to add a layer of SSL/TLS to the server to add HTTPS functionalities. HTTPS is the current standard de facto and it is a necessary step to setup a reachable server.

Available solutions

Usually we use something called a TLS termination proxy to setup the SSL/TLS.

A TLS termination proxy (or SSL termination proxy,[1] or SSL offloading[2]) is a proxy server that acts as an intermediary point between client and server applications, and is used to terminate and/or establish TLS (or DTLS) tunnels by decrypting and/or encrypting communications.
― Wikipedia, TLS termination proxy

Solution 1: Nginx + Certbot + Let’s Encrypt

Certbot can help manage the Nginx reverse proxy and handle renewal for the server. To enable certbot and nginx containers share resources, sharing volumes in the docker-compose may be a viable solution. The certbot can access to Let’s encrypt which is a facility for issuing short-termed SSL/TLS CA certificates free of charge.

Solution 2: Traefik

I actually got to know Traefik in the FastAPI documentations. It seems to be a modern alternative for Nginx which supports auto discovery and load balancing based on the architectures of the Docker Swarm or Kubernetes. It seems to use container tags to discover them. It also supports automatically renew the CA certificates, and has a beautiful control panel (although, impose security risks 🙁 )

Nevertheless one important drawback is that it is sort of an overkill for small personal servers, since its high complexity overweighs its benefit to automatic renewal which can be recognized by certbot.

Solution 3: Cloudflare + Nginx

If you set up your DNS with Cloudflare, they have an option for you to proxy your request and Cloudflare will handle the secure communication between the client server and its proxy. Additionally, they also provide you with a max. 15-years origin CA certificate which is bound to your domain. You only need to bound your original server’s Nginx to the origin CA certificate and you are done. In my opinion it is the most suitable and fast setup for small servers.

Implementation

Obtain a domain of your own from a domain provider.
Login into Cloudflare and enable the DNS for your domain.
- Be sure to select “Proxied” in the mode.
Select SSL/TLS => Overview to enable Full (Strict) mode.
Select SSL/TLS => Origin Server to generate an origin certificate.
Load the origin certificate to your nginx.

Security augmentation

Although not enabled by default, you can add another layer of security by Authenticated Origin Pull (mTLS) which authenticates that the traffic is proxied from the cloudflare server, rather than directly accessed. This helps ensuring that the DDoS protection etc. from cloudflare is in effect.

Check the official document for details:

https://developers.cloudflare.com/ssl/origin-configuration/authenticated-origin-pull

That’s it! Your website now supports SSL/TLS.

Leetcode LCR. 121 寻找目标值 – 二维数组

Fri, 23 Aug 2024 07:03:40 +0000

https://leetcode.cn/problems/er-wei-shu-zu-zhong-de-cha-zhao-lcof/description

碎碎念：关于算法博客 & Why LCR?

因为是第一篇也是第一篇Algorithm的blog，所以先说点啥（）

首先算法题主要是在leetcode cn上面刷的，所以主要使用中文来书写。这样可以直接摘录题目，防止中英文切换出戏（？

其次是关于这个博客的语言。我目前计划是用英文来进行书写，以适配最广大的受众。当然，你也会见到中文的post（比如说这篇）和日文的post。

再说回LCR。LCR原本是剑指offer系列，但是似乎力扣不再与剑指offer合作，所以将剑指offer换成了LCR开头，可以看这个post。

目前的小目标是把LCR过一遍，并把对我有一定思考量，日后可以参考的题目记录在这里。

题解会使用Python，因为~~人生苦短我用Python~~。

题目

m*n 的二维数组 plants 记录了园林景观的植物排布情况，具有以下特性：

每行中，每棵植物的右侧相邻植物不矮于该植物；
每列中，每棵植物的下侧相邻植物不矮于该植物。

请判断 plants 中是否存在目标高度值 target。

示例 1：

输入：plants = [[2,3,6,8],[4,5,8,9],[5,9,10,12]], target = 8

输出：true

示例 2：

输入：plants = [[1,3,5],[2,5,7]], target = 4

输出：false

提示：

0 <= n <= 1000
0 <= m <= 1000

思考

看到这个描述会自然地想到一个“地形”一样的东西。如果用z轴的数值分布的话，它大概长这样 – 从左到右递增，从上至下递增。

关于一点Geogebra 限制定义域：f(x,y) = 0.2x + 0.2y, (y >= 0)，格式比较奇妙。

那么我们会不由自主地想到从左下角到右下角的那个“山脊”。这个山脊具有非常特殊的属性。我们暂时把它上面的这些数称为pivot。

如果在山脊处取一个数pivot，发现目标数target大于它，那么一定是往其右侧寻找。其原因是target是肯定大于这个数以及它所在这个列的所有的数的。这样，相当于每走一步，便排除了一列。

如果发现target < pivot呢？思考其搜索域，即pivot所在列的以左所有列都可以排除，pivot所在列及pivot所在列的右侧列均是搜索的范围。在此之上，我们同样可以排除该行，因为我们知道target<pivot<[pivot以右的pivot]。

所以我们的下一步便是向上走一步。我们非常惊喜地发现，之后的过程事实上是将这个压缩的过程在更小的搜索空间上实施。这样，我们能保证一定能搜索到target，或者这个算法是一定能退出的。

红色的是被我们排除的空间，绿色是这次迭代完成之后的新搜索空间。

考虑到我们走的步数，我们的这个算法是线性，O(m+n)的。

代码实现尝试

我们的思路具有一定的递归性质，但是我们并不需要使用递归函数。我们更多的是实现一个“走格子”的行动。

首先我们先决定退出条件。显然，这个退出条件是越界。

随后我们实现如上所述的算法。

class Solution:    
    def findTargetIn2DPlants(self, plants: List[List[int]], target: int) -> bool:
        # TODO: Boundary exit case        
        if len(plants) == 0 or len(plants[0]) == 0:            
            return False        
        m, n = len(plants), len(plants[0])
        # Set pointer to lower left        
        row, col = m - 1, 0        
        while row >= 0 and col < n:
            # While not overbound            
            pivot = plants[row][col]            
            if target == pivot:                
                return True            
            elif target > pivot:
                # Move to the right                
                col += 1            
            else:
                # Move to the upper side                
                row -= 1        
                return False

AC，速度99%+。

看题解

我想到的这个方法居然叫作Z字形查法（？）

此外，官方题解给出了一个O(mlogn)的方法。方法是逐行进行二分查找。

class Solution:    
    def searchMatrix(self, matrix: List[List[int]], target: int) -> bool:        
        for row in matrix:            
            idx = bisect.bisect_left(row, target)            
            if idx < len(row) and row[idx] == target:                
                return True        
            return False

作者：力扣官方题解链接：https://leetcode.cn/problems/search-a-2d-matrix-ii/solutions/1062538/sou-suo-er-wei-ju-zhen-ii-by-leetcode-so-9hcx/
来源：力扣（LeetCode）著作权归作者所有。
商业转载请联系作者获得授权，非商业转载请注明出处。

这种方法个人感觉比较适合这个矩阵是非常skew，一边长一边短的。这样，在长边上做二分会比较快速。

复习Python的二分库

官方题解提到了Python的二分库，所以复习一下。以下内容摘自Python官方文档。

bisect.bisect_left(a, x, lo=0, hi=len(a))

在 a 中找到 x 合适的插入点以维持有序。参数 lo 和 hi 可以被用于确定需要考虑的子集；默认情况下整个列表都会被使用。如果 x 已经在 a 里存在，那么插入点会在已存在元素之前（也就是左边）。如果 a 是列表（list）的话，返回值是可以被放在 list.insert() 的第一个参数的。

返回的插入点 i 可以将数组 a 分成两部分。左侧是 all(val < x for val in a[lo:i]) ，右侧是 all(val >= x for val in a[i:hi]) 。

=====分割线=====

bisect.bisect_right(a, x, lo=0, hi=len(a))

类似于 bisect_left()，但是返回的插入点是 a 中已存在元素 x 的右侧。

返回的插入点 i 可以将数组 a 分成两部分。左侧是 all(val <= x for val in a[lo:i])，右侧是 all(val > x for val in a[i:hi])。

说的更清楚一点就是，bisect的算法采用了了Dijkstra推荐的左闭右开的原则。一个数组可以被分解为< pivot， = pivot，> pivot的部分（联想荷兰国旗问题）。

bisect_left返回了一个值i使得 [lo, i) 代表小于pivot的区间，而 [i, hi) 代表大于等于pivot的区间。
bisect_right返回了一个值i使得 [lo, i) 代表小于等于pivot的区间，而 [i, hi) 代表大于pivot的区间。

所以事实上[bisect_left:bisect_right]返回的就是=pivot的区间，因为其满足其值>= pivot且其值<= pivot。

Note

当然，使用的时候记得考虑越界的问题，比如说：数组所有的数都大于/小于pivot的时候。

Links

Mon, 01 Jan 0001 00:00:00 +0000

Search