一直对 Medium 的渐进性图片加载颇感兴趣，刚好最近有时间折腾了一下🤘。小有收获，并在自己的 blog 站点实践了一下，总体体验还是不错滴😆。虽然之前对其实现思路有个大概的了解，但当自己深入研究后，发现还是有些值得探讨的技术点。如缩略图的支持、模糊效果处理、如何撑开缩略图等。

singsong: blog 站点的渐进性图片加载并未完全按照 Medium 的实现方式，在其基础上稍微做了一些调整。不过整体效果基本上是一样滴。

在搭建 blog 过程中，使用 lighthouse 审查站点。在性能项上提示Serve images in next-gen formats优化建议。

Image formats like JPEG 2000, JPEG XR, and webp often provide better compression than PNG or JPEG, which means faster downloads and less data consumption.Learn more

JPEG 2000, JPEG XR, 和 WebP 与传统的 JPEG、PNG 相比具有高压缩比、高质量的特点。这让图片加载更快，带宽消耗更少。当前浏览器对 JPEG 2000, JPEG XR, 和 WebP 的支持情况：

第一次了解这项技术是通过 react-virtualized 组件。当时就大概了解了一下，没有深入研究。近期刚好有时间折腾了一下，想将其技术对现有项目进行优化，就对其技术研究了一番。有点收获，就整理一了一下，与大家分享分享。

singsong: react-virtualized 的作者已对 react-virtualized 进行重写。并重新构建为 react-window。

背景

该技术算是对无限滚动加载的一种优化。无限滚动加载随着加载数量的增多，对性能的影响就越来越大。因为每次浏览器需要重绘的 DOM 节点数越来越多，耗时越长。这对用户体验造成的影响也是不容忽略的。为了减少 DOM 节点数量，virtual list 技术应运而生。

最近在开发一个类似 create-react-app 工具。但面临一个问题，需要同时维护两个 packages，开发起来不是很方便，后期维护成本也高（如版本号维护）。于是查看了 create-react-app 源码，发现在其源码中有个 lerna.json 文件。好奇这个文件是做什么的，就了解一番。经查阅了解到 Lerna 可以用来管理项目中多个 packages。这正是自己所需要的，于是就有了这篇文章。本文主要对 Lerna 的使用做个简单介绍。

Lerna

Lerna is a tool that optimizes the workflow around managing multi-package repositories with git and npm.

Lerna 是一个基于 git 和 npm 管理多个 packages 来简化工作流程的工具。

在将 ESLint 集成到自己的开发环境中时，发现对 ESLint 的了解有点模糊。于是就写了这篇文章，记录一下 ESLint 一般使用。

ESLint

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs —— ESLint official website

ESLint 是一个基于 ECMAScript/JavaScript 代码模式识别和报告的工具，用于确保代码的一致性和正确性。

在开始讲解之前，先来看看效果

svg 描边属性 stroke

在 svg 中对图形（line、polyline、rect、circle、ellipse、polygon）、路径（path）、文本(text、textPath、tspan)的描边需要用到stroke属性。

本文主要介绍一种全新的前后端合作模式，在介绍这种模式之前咋们先来看看前后端合作模式的演变。

singsong：该模式主要对传统多页面应用构建的改进。关于 SPA（Single Page Application，单页应用程序）可以参考 SSR（Server-Side Render，服务端渲染）。