Skip to main content

90 posts tagged with "Technology"

View All Tags

CSS Media Query

· 2 min read
Kimi Gao
Fullstack & AI

选择加载 CSS

"自适应网页设计"的核心,就是 CSS3 引入的 Media Query 模块。

它的意思就是,自动探测屏幕宽度,然后加载相应的 CSS 文件。

<link
rel="stylesheet"
type="text/css"
media="screen and (max-device-width: 400px)"
href="tinyScreen.css"
/>

上面的代码意思是如果屏幕宽度小于 400 像素,就加载 tinyScreen.css 文件。

Intro to HTTP/2

· 16 min read
Kimi Gao
Fullstack & AI
C-8t70YXoAEShUL

简介

HTTP/2 主要目的是提高网页性能,最近几年比较火,将其单独抽成一块讲。2015 年,HTTP/2 发布。它不叫 HTTP/2.0,是因为标准委员会不打算再发布子版本了,下一个新版本将是 HTTP/3。

目前还有不少服务还是 HTTP/1.1,NodeJS 也是从 v10 才将 http2 转正。Express5.x 才开始支持 http/2。

可以打开谷歌首页看看,基本上都是 http/2 协议,简写成 h2

TypeScript Type Compatibility

· 18 min read
Kimi Gao
Fullstack & AI

TS 允许将一些不同类型的变量相互赋值,虽然某种程度上可能会产生一些不可靠的行为,但增加了语言的灵活性,毕竟它的祖宗 JS 就是靠灵活性起家的,而灵活性已经深入前端的骨髓,有时会不得不做一些妥协。

当一个类型 Y 可以被赋值给另一个类型 X 时,我们就可以说类型 X 兼容类型 Y

X (目标类型) = Y (源类型)

Primitive type compatibility

原始类型的兼容性主要关注三点:

Node.js 安装与版本管理

· 2 min read
Kimi Gao
Fullstack & AI

简单的说 Node.js 就是运行在服务端的 JavaScript。

  • Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。
  • Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境,基于 Google 的 V8 引擎,V8 引擎执行 Javascript 的速度非常快,性能非常好。

安装 nvm

推荐先安装 nvm,再通过 nvm 去安装 Node.js:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

npm vs. yarn

· 2 min read
Kimi Gao
Fullstack & AI

npm 与 yarn 常用命令对比

同操作同名的命令

npmyarn功能描述
npm runyarn run运行 package.json 中预定义的脚本
npm config listyarn config list查看配置信息
npm config set registry 仓库地址yarn config set registry 仓库地址更换仓库地址
npm inityarn init互动式创建/更新 package.json 文件
npm listyarn list查看当前目录下已安装的所有依赖
npm loginyarn login登录你的用户名、邮箱
npm logoutyarn logout退出你的用户名、邮箱
npm publishyarn publish将包发布到 npm
npm testyarn test(yarn run test)测试
npm binyarn bin显示 bin 文件所在的安装目录
yarn infoyarn info显示一个包的信息

yarn 使用

· 20 min read
Kimi Gao
Fullstack & AI

Get started

macOS

  1. 使用脚本安装,每次安装的都是最新版:
curl -o- -L https://yarnpkg.com/install.sh | bash

如需升级,再次运行此命令,然后会出现以下信息:

/Users/xxx/.yarn already exists, possibly from a past Yarn install.
> Remove it (rm -rf /Users/xxx/.yarn) and run this script again.

根据提示,由于已经安装了 yarn,所以需要先删除~/.yarn文件,然后再重新执行该命令,即可安装最新版 yarn。

TypeScript Generic Function

· 6 min read
Kimi Gao
Fullstack & AI

概述

泛型即不预先确定的数据类型,具体的类型在使用的时候才能确定。本节将学习ts中的泛型函数。

在软件工程中,开发定义良好且可重用的组件是非常重要的,因为这确保了程序的灵活性和长期可扩展性。使用泛型可以创建可重用的组件,一个组件可以支持多种类型的数据,而用户就可以根据自己的需要的数据类型来使用组件。

泛型函数

什么是泛型函数

概述中泛型的概念比较抽象,为了理解什么是泛型函数,我们可以结合一个例子来说明。

如下例所示,identity函数返回传入的参数,但是这个函数的可重用性很差,只能支持number类型。

function identity(arg: number): number {
return arg;
}

为了支持更多的类型,我们可以将参数设置为联合类型或者any类型。

TypeScript Interface: Extend or implement

· 2 min read
Kimi Gao
Fullstack & AI

Interface extends interface

Interfaces can extend one or more interfaces. This makes writing interfaces flexible and reusable.

interface Person {
name: string;
gender: string;
}

interface Employee extends Person {
department: string;
}

let empObj: Employee = {
name: 'Kimi',
gender: 'male',
department: 'Payment',
};