数据报告海报生成图片、PDF方案的技术调研|前端技术调研|可视化-PDF-HTML2Canvas-jsPDF1. 需求梳理现存在一个需求，要求用户可以通过控制左侧的表单选项，在右侧实时展示为用户生成的数据海报，在用户调整完毕后，可以生成共享链接、图片、PDF 三种可分享的媒体形式，整体效果如下图：
2. 海报的实时生成与预览2.1 架构设计整体页面的组件拆分并不复杂，可以简单分为如下几个组件：
Gen ...
TypeScript 类型体操通关记录|前端Javascript|Typescript1. 简单PickSource
Pick 是 TypeScript 中的一个内置工具类型，可以从某个类型中提取出来几个特定的属性 Key 来创建一个新的类型：
123456789101112interface Todo { title: string; description: str ...
手动实现 JavaScript 类的继承|前端Javascript|面试题-JavaScript-面向对象原型链继承这个实现方式是将子类的 prototype 直接指向一个实例化好的父类，这样当实例化后的子类查找属性或方法时，就能通过这个实例化好的父类拿到父类构造函数（在 prototype 上的）的属性或方法。
实现：
12345678910111213141516171819202122232425 ...
关于 Stylus 的常用技巧|前端CSS|CSS-stylusStylus Playground
1. 选择器Parent 选择器 & 字符可以用于父级选择器：
12345textareainput color #A7A7A7 &:hover color #000
编译为：
12345678textarea,input { ...
Node 服务内存溢出排查方案|后端Node|node-内存溢出对于本地可复现的进行调试使用 ab 指令可以在本地进行压测，如：
1ab -n 2000 -c 100 http://localhost:8090/home
然后通过 --inspect 指令链接 chrome 调试器进行调试：
1node --inspect --heapsnapshot-sig ...
Webpack 操练场 ③：使用 Webpack 构建 Vue 开发环境|前端前端工程化|webpack使用 Webpack 构建 Vue 开发环境对应代码：https://github.com/EsunR/webpack-playground/tree/main/templates/vue
本章节示例的 Vue 环境为 Vue3，基于 TypeScript 构建
调整 Eslint 规则如果我们 ...
Webpack 操练场 ②：使用 Webpack 构建 TypeScript 开发环境|前端前端工程化|webpack使用 Webpack 构建 TypeScript 开发环境对应代码：https://github.com/EsunR/webpack-playground/tree/main/templates/html-ts
准备 TypeScript 环境首先安装 TypeScript：
1pnpm insta ...
Webpack 操练场 ①：第一个 Webpack 应用|前端前端工程化|webpack第一个 Webpack 应用对应代码：https://github.com/EsunR/webpack-playground/tree/main/templates/html
安装 webpack12345# npmnpm install webpack webpack-cli -D# pnpm（本 ...
在 Webpack 中同时使用 ts-loader 和 babel-loader|前端Javascript|Webpack-Babel-TypeScript1. 为什么要同时使用 ts-loader 和 babel-loader在使用 Webpack 构建 TypeScript 项目时，我们通常会使用 ts-loader 来加载 ts 代码，ts-loader 会根据目标 tsconfig.json 文件调用 TypeScript Compiler 来 ...
使用 Lambda 函数实现 AWS S3 的图片缩放、质量调整、自动 webp|云原生|aws-lambda-lambda@edge-s3-webp
本文章只是讲实现方案，并不会涉及具体的代码上线，如果你想参考代码以及详细的部署流程，可以参考该项目：s3-image-handler
1. 前言不同于国内的很多对象存储服务，AWS S3 并不提供图像处理的服务，需要用户使用 Lambda 函数或者 EC2 搭建图片缩放服务，这就使用用户有比较 ...
