带你看懂思源字体的各个版本都有什么区别
1. 前言思源字体是 Adobe 提供的一套开源字体,包含了 思源黑体 source-han-snas,思源宋体 source-han-serif,思源等宽 source-han-mono。其开源协议允许商业用途,同时允许对其进行修改,因此非常适合使用。 我们以思源黑体为例,当我们打开其 Relea ...

数据报告海报生成方案技术调研
1. 需求梳理现存在一个需求,要求用户可以通过控制左侧的表单选项,在右侧实时展示为用户生成的数据海报,在用户调整完毕后,可以生成共享链接、图片、PDF 三种可分享的媒体形式,整体效果如下图: 2. 海报的实时生成与预览2.1 架构设计整体页面的组件拆分并不复杂,可以简单分为如下几个组件: Gen ...

TypeScript 类型体操精讲
实现 PickSource Pick 是 TypeScript 中的一个内置工具类型,可以从某个类型中提取出来几个特定的属性 Key 来创建一个新的类型: 123456789101112interface Todo { title: string; description: strin ...

字节跳动面试记录(三)
一面【框架相关】React 什么时候有的 hook,为什么会有 hook 这种写法?On February 16, 2019, React 16.8 was released to the public Intro video 官方文档介绍 React Hook 产生的动机: 组件之间的逻辑状态很 ...

手动实现 JavaScript 类的继承
原型链继承这个实现方式是将子类的 prototype 直接指向一个实例化好的父类,这样当实例化后的子类查找属性或方法时,就能通过这个实例化好的父类拿到父类构造函数(在 prototype 上的)的属性或方法。 实现: 12345678910111213141516171819202122232425 ...

关于 Stylus 的常用技巧
Stylus Playground 1. 选择器Parent 选择器 & 字符可以用于父级选择器: 12345textareainput color #A7A7A7 &:hover color #000 编译为: 12345678textarea,input { ...

Webpack 操练场 ③:使用 Webpack 构建 Vue 开发环境
使用 Webpack 构建 Vue 开发环境对应代码:https://github.com/EsunR/webpack-playground/tree/main/templates/vue 本章节示例的 Vue 环境为 Vue3,基于 TypeScript 构建 调整 Eslint 规则如果我们 ...

Webpack 操练场 ②:使用 Webpack 构建 TypeScript 开发环境
使用 Webpack 构建 TypeScript 开发环境对应代码:https://github.com/EsunR/webpack-playground/tree/main/templates/html-ts 准备 TypeScript 环境首先安装 TypeScript: 1pnpm insta ...

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
1. 为什么要同时使用 ts-loader 和 babel-loader在使用 Webpack 构建 TypeScript 项目时,我们通常会使用 ts-loader 来加载 ts 代码,ts-loader 会根据目标 tsconfig.json 文件调用 TypeScript Compiler 来 ...