服务端渲染（Server-Side Rendering）的由来

服务端渲染（Server-Side Rendering, SSR），是指从服务端渲染出前端页面的内容后，直接下发给前端进行展示的渲染过程；与之相对的是客户端渲染（Client-Side Rendering, CSR），是指浏览器负责了页面中大部分内容渲染工作的过程，服务端往往只负责简单的静态资源加载的功能。

从前端发展至今，经历了 SSR -> CSR -> CSR+SSR 的转变过程，也对应了前后端一体 -> 前后端分离 -> BFF(Backend For Frontend) 趋势。我是从 2018 年左右开始接触前端的，这时候 React/Vue 已经很流行了，甚至很多人以为学习前端就是学好 React/Vue 这些框架就好了，其实不然。在最早期的时候，前后端还没有分离，网页内容完全是由服务端渲染的，当时 PHP、JSP (Java Server Pages) 等类似的技术还非常流行，可以根据前端每次请求返回不同的前端 Html 页面内容，前端的 JS 逻辑相对比较简单。后面 JS 逻辑越来越重，出现了 jQuery 这样的前端库，前端也越来越复杂。后面逐渐出现了 Angular、React、Vue、Svelte 这样的前端框架，和 Webpack 等前端构建工具并行发展，前端代码可以组件化、虚拟 DOM 也提升了直接操作 DOM 的性能，jQuery 逐渐退出历史舞台，「前端工程师」的角色也是在这个时候越来越重要了。于是越来越多的逻辑被写在前端代码里，服务端只是负责把 JS, Html, CSS 这些资源下发给浏览器，这也就是客户端渲染（Client-Side Rendering）的模式。

在 2022 年，字节实习的那段时间里，我参与了 Speedy 的开发，主要的任务是为 Speedy 实现服务端渲染的能力，本文介绍一下实现原理。

在现在的前端生态中，TypeScript 已经成为了非常重要的一位成员，很多用 JS 新写的库往往会直接使用 TS 来编写，提供 first class 的类型支持（例如 vue@3, windicss, vite 等等）。以前用 JS 的旧项目，只要是比较火的，基本上都在 DefinitelyTyped 有了来自社区的 .d.ts 类型定义（例如 express, koa, lodash 等等）。TypeScript 一直都作为社区生态而不是 JS 语言自身的标准存在，前段时间 TypeScript 团队主推了「Types as Comments」提案，将在 2022 年 3 月底的 TC39 会议上讨论，受到了广泛关注，可以参考知乎 如何看待 TS 团队发起的 「JS 类型标注」提案 Types as Comments？ 和 TypeScript 官方推特，Types as Comments 提案意味着浏览器可以直接运行经过 TypeScript 代码（但是会跳过类型检查），这就省去了繁重的编译工具，可以提升开发效率。

原文链接放在我的 GitHub 上: https://github.com/upupming/frontend-learning-map/blob/main/daily-fe-problems/create-vue-learning.md ，这也是我的前端学习路线，欢迎大家 Star~

美国时间 2021 年 10 月 7 日早晨，This Dot Media 邀请了 Vue 的核心成员和 Vue Community （例如 Quasar, Ionic 开发者等）的一些主要贡献者举办了一个 Vue Contributor Days 在线会议，长达两个半小时，会上 vue-cli 的核心贡献者胖茶也在同一天公开了全新的脚手架工具 create-vue，我也是看到 antfu 发推就关注了一下，看完直播回放之后收货很大，这里做一些总结并且分析一下最新发布的 create-vue 的源码。

主要关注了尤大的 talk，PPT 链接在这里，我转载到了我的 GitHub 上，大家可以下载来看一下最新的进展，另外还有胖茶现场演示了如何使用 create-vue。

准备工作

迭代器和生成器

关于迭代器和生成器，我看的是《深入理解 ES6》，里面讲的很好，如果有不理解的同学，可以先补一补，英文版是开源的，在这里。

原文链接: https://github.com/upupming/vue-next-analysis/blob/master/md/release/README-upupming.md

准备工作

第一次阅读参与源码共读活动，看了上期的工具函数的总结，学习到很多，感觉跟着若川大哥学下去肯定会收获满满。

这次要阅读的源码在: https://github1s.com/vuejs/vue-next/blob/HEAD/scripts/release.js 。

这次考试的知识点恰好是不是很熟的，还需要加强。算法分别是数位 DP、暴力枚举、动态规划和表达式求值。

Google Kickstart 2021 Round A 的题解，附上我的一些思考过程，希望对你有所帮助。

比 A 轮还是难一点，只拿了 37 分，思维和代码熟练度都欠缺，再接再厉。

• Score: 37
• Rank: 1946

vcpkg is a C++ Library Manager for Windows, Linux, and MacOS. vcpkg for C++ is the same as npm for node.js. On the Windows platform, for a long time, people have to manually compile various libraries with different parameters. When library A depends on library B, library B must be compiled too. Therefore, the process of building the project is very time-consuming. vcpkg can solve this problem, all dependencies can be installed just use one command vcpkg install.

On Windows, I always prefer to use VSCode instead of Visual Studio, because VSCode is much faster! So, I try to find a best practice to develop C++ applications on VSCode with the help of vcpkg. You can just grab the sample source code here.

Google Kickstart 2021 Round A 的题解，附上我的一些思考过程，希望对你有所帮助。

感觉本轮题目还是比较简单的，应该是第一次难度调小了一点，另外这次参加的人数大涨，报名总数接近两万人了。

很久没写优先队列 BFS，卡了很久，导致后面没时间想最后一题了（估计也想不出来），之后遇到这种情况马上看之前写的代码，不要自己想。

• Score: 56
• Rank: 2160

Google Kickstart 2020 Round E 的题解，附上我的一些思考过程，希望对你有所帮助。

Round G 的题解，附上我的一些思考过程，希望对你有所帮助。

在实际的开发过程中遇到这样的问题：在一个父元素中有很多子元素，希望这些子元素按行展示，每一行 2 （或者 n）个，还要求每一行的两个子元素之间有固定的间距。这种时候最简单的实现方式就是 grid，但是由于兼容性问题，本文介绍了一种只使用 flex 的实现。具体效果如下图所示：

Round B 的题解，附上我的一些思考过程，希望对你有所帮助。

由于之前一直在做毕设的事情，很久没有更新博客啦，今天更新一篇 Kick Start 2020 Round A 的题解，所有代码都可以在我的 GitHub 上找到，地址：https://github.com/upupming/algorithm/tree/master/kick-start/2020 ，对你有帮助的话可以点个 Star~

即将面试今日头条的前端实习，此次一定要做好充足准备，特打算花个几天的时间对前端来一个系统性的梳理（前端太庞大，其实也只能包含一小部分哈哈）。虽然检查了很多遍，可能仍有错误，如果发现，请指正，谢谢！

本文参考了很多资料，特别需要感谢的有：

1. https://juejin.im/post/5dafb263f265da5b9b80244d
2. https://github.com/Molunerfinn/2019-job-hunting

随机算法：算法步骤往往非常简单，但是要验证其有效性，需要很多数学知识。往往实现简单，但是设计复杂。

这个学期的『随机算法』课程收获非常大，不仅巩固了之前所学的算法知识，还对复杂度分析、概率论都有了更加深入的了解，还学习到了利用随机性打破复杂问题求解的下界的方法。在准备考试的同时，写下这篇文章留给读者和未来的自己看，希望能让大家有所收获。

哈工大《信息隐藏基础》总复习。

由于百度人工智能比赛的需要，我们需要爬取新浪微博的微博数据，得到带表情的微博，将数据进行适当地处理，便于后续深度学习模型的训练使用。本文章用到的所有源代码请见 https://github.com/upupming/weiboAPI 。注意本文是一个探索过程，并不是一个总结。

2019 年 5 月 18 日，记录一下今天的编译原理考试。

最近从 GitHub clone 仓库速度极慢，遂查阅资料解决之。本文主要介绍 Git 使用 SSH 克隆时如何走 Socks 代理，因为使用 HTTPS 克隆的话目前基本上很容易找到资料，比如 Using a socks proxy with git for the http transport | Stackoverflow。

随机算法作业 2，主要是『球和箱子模型』的相关题目。

之前老师讲过两个不等式：

1. 马尔科夫不等式

   $P(X \ge t) \le \frac{E(X)}{t}$

2. 切比雪夫不等式

   令 $Y = [X-E(X)]^2$

   $P(Y \ge t^2) \le \frac{E(Y)}{t^2} = \frac{D(X)}{t^2}$

随机变量偏离它的期望一个给定的值的概率，被称为偏差的尾概率(tail probability)。尾概率的计算方式除了利用已知条件直接计算以外，还有很多『模板』可以使用，就包括：

1. 马尔科夫（Markov）不等式
2. 切比雪夫（Chebyshev）不等式
3. 切尔诺夫（Chernoff）界

简单来说尾概率就是 $P(X > t)$ 的范围主要由计数计算概率法和利用数字特征计算的方法。

这篇文章将详细介绍切尔诺夫界，以及鞅的相关概念和应用。

• 切尔诺夫界：『独立随机变量的和』的分布的尾概率的一般的界，通过矩生成函数得到，有『切尔诺夫型』、『指数形式』尾概率界等。
• 鞅：对不能抽象为『独立随机变量的和』的应用场景，鞅可以得到随机变量偏离期望的程度的界。

最近花了 4 天时间写了一个算数编码的库 arithmetic-coding，算是自己开发的第一个比较规范的 npm 库，在此分享详一些相关的经验，希望能帮助到朋友们。

随机算法常用不等式，持续更新中。

随机算法里面的 Las Vegas 算法、Monte Carlo 算法、姚期智不等式等等的习题。

本文总结了概率论的基础知识，主要是一些定义。

行列式的物理（几何）意义、计算方式、拉普拉斯展开证明等等。

特征值、特征向量、特征根相关知识。

一篇文章详细搞懂傅里叶变换的数学推导及其本质、应用等等。

本文是根据逻辑回归实验总结的数学推导和实验结果。

Why $\KaTeX$

1. Much more faster than MathJax.
2. No issues such as #93, #108.

How to configure $\KaTeX$

Change your melody.yml to load $\KaTeX$ css:

katex:
  enable: true
  cdn:
    css: https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css

To use $\KaTeX$ in melody, you need to uninstall your old hexo render, and then install hexo-renderer-markdown-it-plus:

# Replace `hexo-renderer-kramed` with `your installed renderer`
# You can check your installed renderer in your package.json
npm un hexo-renderer-kramed --save
# install `hexo-renderer-markdown-it-plus`
npm i @upupming/hexo-renderer-markdown-it-plus --save

本文主要介绍了小程序客户端、服务器端开发（RESTful API）的相关经验。

微信小程序对没有对多语言的支持，不过我们可以自行加入。

在实现过程中，主要考虑到如下几点：

1. 语言是全局变量，一旦修改语言，其它页面应该立即作出变化。
2. 保存用户选择的语言，用户下次重新打开小程序能够恢复用户的选择。

本文记录了哈工大信息安全概论课基础知识点。

This is an easy-to-understand note for Reading 13: Abstraction Functions & Rep Invariants.

软件构造（software construction）的核心就是从不同角度审视软件系统，做到在各方面的兼顾。先要搞清楚我们要关注的点，才有软件构造可言。

软件构造视图主要分为 Build-time 视图和 Run-time 视图。他们又分为了 Monment 和 Peroid 两部分，每部分都要考虑到 Code-level 和 Component-level 的细节。

本系列主要介绍了常用的面向复用的设计模式，包括创建型模式（Creational Patterns）、结构型模式（Structural Patterns）和行为型模式（Behavioral Patterns）。

本系列主要介绍了常用的面向复用的设计模式，包括创建型模式（Creational Patterns）、结构型模式（Structural Patterns）和行为型模式（Behavioral Patterns）。

This is an easy-to-understand note for Reading 21: Locks and Synchronization.

Exercises are very important, do not skip them. On the contrary, you can read this article in an exercises-driven way if you just want to review the key ideas.

This is an easy-to-understand note for Reading 20: Thread Safety.

Exercises are very important, do not skip them. On the contrary, you can read this article in an exercises-driven way if you just want to review the key ideas.

This is an easy-to-understand note for [Reading 19: Concurrency][1].

Exercises are very important, do not skip them. On the contrary, you can read this article in an exercises-driven way if you just want to review the key ideas.

本文定义了一个 Java UML 标准，同时详细分析了各种 Delegation 及其 UML 表示。

本文主要介绍了在一个仓库内部克隆另外一个仓库，后续该如何进行管理。

2018 年 5 月 1 日 GitHub Blog 宣布增加了 Github Pages 对自定义域名的 https 支持。

异常被捕获后，程序是否会继续执行 try-catch 块后的语句？

__答案：__会。

欢迎 Fork 我的博客@GitHub。

这阵子我把 hexo 博客新换了一个主题 melody，主要就是为了让博客更加美观、简洁。换好主题之后发现有好多可以继续提升的地方，主要包括图标美化、 SEO 优化、自动构建这三个方面。

本文主要介绍了 Gradle 的使用，同时对相应的用于持续集成构建的 travis.yml 文件配置进行解读。

对于从Object到泛型的类型转换，遇到警告Type safety: Unchecked cast from Object to Edge，解决方案是修改转换的类型为通配符类型：

Edge<?> other = (Edge<?>) otherObject;

具体分析见下文。

文章来自Connecting with Cornell，文中的 Introduction 、 Summary 、 Conclusion 是笔者自己加的。

启示：研究是一项有意思的工作，你身处其中会收获很多知识与欣喜，也会体会到责任的重大，努力的做一个合格的研究人员吧。

文章来自Science，由于本人翻译水平有限，仅供参考；若有错误之处（肯定不少），还请读者不吝赐教。

作者： Gordon McBean, Alberto Martinelli
Science 2017年11月24日

我的 hexo 博客 hello world，探索一些小问题。