值得观看的电影

《白日梦想家》

《辩护人》

《勇敢的心》

《阿甘正传》

1. 前言

1.1. update on 5th/Apr/2023

根据 flex-layout 官方宣告, @angular/flex-layout 当前处于 deprecated 状态. 替代方案为 Tailwindcss 或者 Angular CDK.

具体原因参考官方的 anoucement - Medium post
和 github 上的讨论

建议新项目使用其他 css library, 旧项目考虑移植到其他 css library.

迁移工具:

migrate-angular-flex-to-tailwind

[flex-layout-migrator](https ://github.com/NIPE-Solutions/flex-layout-migrator)

1.2. update on 25th/June/2023

目前 DuncanFaulkner 克隆了@angular/flex-layout 并提供社区支持, 目前以及能支持 Angular 16 了.

所以使用社区版本的 flex-layout 也是一直选择, 如果重度依赖 flex-layout

新家现在位于

@ngbracket/ngx-layout。

2. 安装

要在 Angular CLI 项目中使用@angular/flex-layout 相当简单，只需要两个步骤：

1. 安装组件指令

   1	npm install @angular/flex-layout --save

2. 将 Angular Flex Layout 导入到 app.module 中

   1 2 3 4 5 6 7 8 9

   // src/app/app.module.ts import {NgModule} from '@angular/core'; import {FlexLayoutModule} from '@angular/flex-layout'; @NgModule({ imports: [FlexLayoutModule], ... }) export class AppModule {}

1. 前言

• 为什么选择 angular material design?

实际上如果想在自己的 web 项目中使用 material design 这套设计理念, 有多种选择, 一个是使用 bootstrap + mdbootstrap 这套架构和组件, 或者使用 bootstrap+materialize-css 这套解决方案. 其核心思想就是使用 bootstrap 去处理响应式 web ux 的问题以及跨浏览器, 跨各种大小屏幕兼容性问题, 而使用 mdbootstrap 或 materialize 去实现一套 material design 风格的组件库. 实际上这是一套很好的思路, 各方案专注自己的擅长的领域, 保持小而美的设计. 但是现实问题是 mdbootstrap 并不是免费的, 其 prime 版本是收费的, 而且对初创公司来说其收费还不便宜. materialize-css 是开源免费的, 但是截至 2022-05-29, 该项目已经 6 年没有更新了, 最近的一个版本是 6 年前发布的一个 1.0.0 版本.

1. 前言

1.1. 网络存储技术

网络存储技术大概可以分为3种：

• DAS：直连式存储（Direct Attached Storage），直接与主机相连的存储设备。它依赖于服务器，本身是硬件的堆叠，不带有任何存储操作系统。现在常见的DAS设备：硬盘座带上 N个硬盘。

• NAS：网络连接式存储（Network Attached Storage），存储设备直连网络，NAS设备和DAS设备不同在于，NAS设备一般带有存储操作系统。

• SAN：存储网络（Storage Area Network），可以说是一种网络基础设施。SAN和NAS的区别主要在于：SAN针对海量、面向数据块的数据传输，而NAS则提供文件级的数据访问功能。

1. 前言

构建软件和运行项目的方法有很多种。当我们开始在 GitLab 中构建产品组合和项目管理工具时，我们问自己，“您如何构建工具来支持各种工作流程，而不会因为工具本身的复杂性而陷入瘫痪？我们的结论是什么？构建更少但更灵活的工具。GitLab 的内置issue board是一个很好的例子，说明选择构建单个多功能工具可以显著降低工具维护的复杂性，同时不会限制其功能。

管理项目和软件本质上是复杂的，但项目管理工具本身不一定如此复杂。无论您管理多少个项目、人员或产品，获得保持平稳运行所需的可见性应该是一件容易的事。

GitLab issue board是一个使用简化方法解决复杂问题的很好的例子。我们建立在 GitLab 现有的问题跟踪功能之上，并利用 GitLab 问题标签的强大功能，将它们用作看板上的列表。您可以构建不同的问题板视图，同时保持您在问题跟踪器中看到的相同过滤和排序功能。您可以创建多个板来捕获所需可见性，并按里程碑、标签、责任人和权重定义板的范围。

issue board基于其项目的标签结构，因此，它应用相同的描述性标签来定位在板上的位置，从而在整个开发生命周期中保持一致性。而且，您可以直接从开发板中单击某个问题以开始您的工作。

issue board显示您的团队正在处理哪些问题，分配给每个问题的人员以及这些问题在工作流中的哪个位置

1. 前言

Material设计为提高密度改善用户体验的用例提供高密度间距指导。

1. 颜色系统

Material设计颜色系统可以帮助您创建反映您的品牌或风格的颜色主题。

1.1. 颜色用法和调色板

Material设计颜色系统可帮助您以有意义的方式将颜色应用于 UI。在此系统中，您可以选择主要颜色和次要颜色来代表您的品牌。然后，每种颜色的深色和浅色变体可以以不同的方式应用于 UI。

1. 说明

导航允许用户在应用程序中移动。

1.1. 导航类型

导航是在应用程序的屏幕之间移动以完成任务的行为。它是通过几种方式实现的：专用导航组件、将导航行为嵌入内容以及平台功能。

1. Gitlab CI/CD 基础

课程主要内容

• 为什么要做CI/CD?
• GitLab CI/CD
• GitLabCI vs JenkinsCI

1. 前言

本页描述组件在布局中的行为，包括与网格以及断点的关系。

2. Position术语

UI元素在每个分界点范围内的行为方式不同。UI元素、组件和表面在网格中的位置用以下术语描述。

1. Elevation（标高）

Elevation（标高）是沿 z 轴的两个Surface之间的相对距离。

2. 测量标高

Material Design中的标高为Material surfaces之间的距离。从一个Material surface的前部到另一个Material surface前面的距离沿 z 轴以与dps(density-independent pixels)为单位进行测量，并使用阴影进行描绘（默认情况下）.

1. 介绍

Material 是 Google 创建的一个设计系统，旨在帮助团队为 Android、iOS、Flutter 和 Web 构建高质量的数字体验。

2. 原则

2.1. 材料是隐喻

Material design 的灵感来自物理世界及其纹理，包括它们如何反射光线和投射阴影。Material surfaces 重新构想了纸张和墨水的介质。

• Bold, graphic, intentional
  材质设计由印刷设计方法（排版、网格、空间、比例、颜色和图像）指导，以创建让观看者沉浸在体验中的层次结构、意义和焦点。

• Motion provides meaning
  Motion 通过微妙的反馈和连贯的过渡来集中注意力并保持连续性。当元素出现在屏幕上时，它们会通过交互来转换和重新组织环境，从而生成新的转换。

1. 理解layout

material设计布局使用统一的元素和间距，以鼓励在多种平台、环境和屏幕尺寸之间的一致性。

1.1. 原则

• Predictable(可预测的) 使用直观且可预测的布局，并具有一致的UI区域和空间组织。

• Consistent(一致的) 布局应始终使用网格、关键线和填充。

• Responsive(响应的) 布局是自适应的。它们对用户、设备和屏幕元素的输入做出反应。

1. 光线和阴影

material surface阻挡光源时会投射阴影。

在material设计环境中，虚拟灯光照亮UI。关键灯光创建更清晰的方向性阴影，称为关键光阴影。环境光从各个角度出现，以创建漫射的柔和阴影，称为环境光阴影。

1. 像素密度(Pixel Density)

一英寸屏幕上存在的像素数称为像素密度。

屏幕像素密度和分辨率因平台而异。

1.1. 屏幕密度变化

高密度屏幕的每英寸像素数比低密度屏幕的多。因此，相同像素尺寸的UI元素在低密度屏幕上显示得更大，而在高密度屏幕上显示得更小。