42 posts tagged with "Frontend"

Type Annotations​

• What: Like type declaration in Java.
• How: Syntax as following:

variable: type;

ES/TS Primitive Types​

boolean​

let bool: boolean = true;

物理像素与独立像素​

px 像素（Pixel），相对长度单位。本来 px 还是很好理解的，但是由于 Retina 屏让 px 变得扑所迷离，也是在移动端 Web 开发的时候不得不跨越的一个坎。我们先了解一下两个概念：

• 物理像素(实际像素)：即小格子，是各个厂家所宣称的屏幕分辨率，比如：2880x1800，Retina 屏所说的像素就是物理实际像素。
• 独立像素：即大格子，是 JS/CSS 所认为的像素
  • 非 Retina 屏 独立像素 = 物理像素
  • Retina 屏 独立像素 < 物理像素

Online demo: http://www.liquidapsive.com

Basic Concept​

Before introduction on responsive and adaptive design, let's start by Static and Liquid which are basis of responsive and adaptive design.

Static​

Static layouts are the traditional web: one design that sits in the center of the page and requires horizontal scrolling if the window is too small for it. M dot sites (m. site is a website that's specifically designed for mobile devices, and exists on a separate subdomain) are the traditional answer to this, providing a wholly separate site for a lower resolution - and all the work of creating a separate site.

npm (Node Packaged Modules) is node's official package manager. You can also see all the versions of node and corresponding npm here.

Overview​

npm CLI documentation

Acronym​

-g​

--global 缩写为 -g，表示安装之后的包将位于系统预设的全局目录之下。

-S​

--save 缩写为 -S，表示安装的包将写入 package.json 里面的 dependencies。

选择加载 CSS​

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

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

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

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

简介​

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

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

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

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

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

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

Primitive type compatibility​

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

简单的说 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 与 yarn 常用命令对比​

同操作同名的命令​

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。