发表于 | 更新于

俗话说，一个人走得快，一群人走得远。作为一个团队的领导，拥有高超的领导力，是团队走向成功的关键。那么如何培养提高自己的领导力呢？美国一个创业者给出了一个方法。按照下面的四个阶段，就能让自己成为一个优秀的领导者。

第一阶段：熟悉自己的业务，知道问题在哪里，怎样可以解决。

领导者是给大家指方向的，你必须先知道要走哪个方向，才能带领别人，这是领导力的基础。

第二阶段：培养说服能力，能说服他人，问题可以按照你说的方式解决。

领导力的表现是，他人愿意服从你。这不能都靠制度压服，而要让他人真心觉得你是对的。如果你可以让他人相信你，你就可以领导。

第三阶段：激发他人的热情，让他们产生解决问题的热情。

说服他人的更高境界，是让他们真正投身进来，自觉发挥自己的潜力，全力以赴解决需要解决的问题。好的领导和差的领导，区别就在于能否激励下级，让每个人都知道自己的职责，努力工作。

第四阶段：你培养其他人的领导能力。

如果你离开，团队也能正常运作下去，说明一切已经制度化了，你的领导已经成功了。这时，你可以让其他人接管团队，自己去实现下一个目标。

参考链接

  1. The Culture of Leadership,by Ben Mappen.
  2. 科技爱好者周刊（第 112 期）：如何培养领导力,by ruanyifeng.

发表于 | 更新于

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。下面记录一下CSS的“奇技淫巧”。

使用伪元素创建向右箭头

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.targetDiv::after{
  content: " ";
  display: inline-block;
  height: 8px;
  width: 8px;
  border-width: 2px 2px 0 0;
  border-color: #b2b2b2;
  border-style: solid;
  transform: matrix(.71,.71,-.71,.71,0,0);
  position: relative;
  top: -2px;
  position: absolute;
  top: 50%;
  margin-top: -5px;
  left:90%;
  right: 0;  
}

CSS3 框大小

CSS3 box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。

默认情况下，元素的宽度与高度计算方式如下：

width(宽) + padding(内边距) + border(边框) = 元素实际宽度

height(高) + padding(内边距) + border(边框) = 元素实际高度

但是，如果在元素上设置了CSS3 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也将包含在 width 和 height 中。

CSS writing-mode 文字竖排

writing-mode 属性定义了文本在水平或垂直方向上如何排布。

语法格式如下：

1
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
  • horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom
  • vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left
  • vertical-lr：垂直方向内内容从上到下，水平方向从左到右
  • sideways-rl：内容垂直方向从上到下排列
  • sideways-lr：内容垂直方向从下到上排列

CSS 箭头和三角形

CSS画箭头和三角形都是利用div标签的边框属性，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 三角形
<div class="box"></div>
// css代码
.box {
  width: 0;
  height: 0;
  border: 100px solid red;
  border-color: red transparent transparent transparent;
}

// 箭头
<div class="box"></div>
// css代码
.box {
      margin-top: 50px;
      width: 100px;
      height: 100px;
      border-top: 10px solid red;
      border-right: 10px solid red;
      transform: rotate(45deg);
}

height:100%不生效问题

浏览器按照从上到下，从外到内的顺序渲染DOM内容。因此当父元素没有设置高度值或者设为绝对定位，则子元素的height:100%不会不生效。

div的高度是由什么决定？是由它文档流中元素的高度的总和。

什么是文档流(Normal Flow)：指的是元素排版布局过程中，内联元素会默认自动从左往右，块级元素从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

脱离文档流(常见):

  • float:left;
  • position: absolute;
  • position:fixed;

单行缩略..以及多行缩略

html单行缩略方法:

1
2
3
4
5
.oneline {
    white-space: nowrap; //强制文本在一行内输出
    overflow: hidden; //隐藏溢出部分
    text-overflow: ellipsis; //对溢出部分加上...
}

CSS尺寸单位 % px em rem

在CSS中，尺寸单位分为两类：相对长度单位和绝对长度单位。相对长度单位按照不同的参考元素，又可以分为字体相对单位和视窗相对单位。字体相对单位有：em、ex、ch、rem；视窗相对单位有：vw、vh、vmin、vmax几种。绝对长度单位则是固定尺寸，它们采用的是物理度量单位：cm、mm、in、px、pt以及pc。但在实际应用中，我们使用最广泛的则是em、rem、px以及百分比（%）来度量页面元素的尺寸。

  • px：为像素单位。它是显示屏上显示的每一个小点，为显示的最小单位。它是一个绝对尺寸单位，是不能变动的；
  • em：它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位，可以变动。一般浏览器字体大小默认为16px，则2em == 32px；
  • rem：它是描述相对于当前根元素字体尺寸，除了描述对象与em不同其余都和em一样。
  • %： 百分比，它是一个更纯粹的相对长度单位，可以变动。它描述的是相对于父元素的百分比值。如50%，则为父元素的一半。

CSS使网站黑白灰效果的代码

使用如下CSS即可：

1
2
3
4
5
6
7
8
html {
       filter: grayscale(100%); 
       -webkit-filter: grayscale(100%); 
       -moz-filter: grayscale(100%); 
       -ms-filter: grayscale(100%); 
       -o-filter: grayscale(100%); 
       -webkit-filter: grayscale(1);
   }

代码释义：filter 是滤镜的意思，filter:gray 的意思就是说给页面加上一个灰度的滤镜，所以 html 里面的所有内容都会变成黑白的了。不过这个滤镜对于 Chrome 和 Safari 浏览器是无效的，所以下面会有一行 -webkit-filter: grayscale(100%); 这个样式是专属于使用 webkit 内核的浏览器的，意思和 filter: gray; 差不多，只是写法不同罢了。

CSS打印时隐藏输入框占位符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@media print {
  ::-webkit-input-placeholder { /* WebKit browsers */
      color: transparent;
  }
  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color: transparent;
  }
  ::-moz-placeholder { /* Mozilla Firefox 19+ */
      color: transparent;
  }
  :-ms-input-placeholder { /* Internet Explorer 10+ */
      color: transparent;
  }
}

CSS float属性

CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。

文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。

当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素，浮动元素会造成父元素高度塌陷。

清除浮动的影响的方法有：

  • 设置父布局的高度

设置父标签合适的高度，前提必须确定子布局的高度，来计算父布局的合适高度，包裹住子布局。

  • 受影响的元素加clear属性

给受影响的div加clear，清除浮动的影响

  • overflow清除浮动

父级标签的样式里面加: overflow:hidden;

  • 空div法

在最后一个浮动的盒子的后面，新添加一个标签。然后设置clear清除浮动。

  • 伪对象法

为父标签添加伪类After,设置空的内容，并且使用clear:both;

CSS width属性

css的三大特性分别是 继承性，层叠性，和优先级。

css的继承性指的被包在内部的标签拥有外部标签的样式性，子元素可以继承父元素的属性。但也不是所有的css属性都有继承性的。

  • 只有块元素才可以默认“继承”其父元素的width.
  • 浮动元素和定位元素也是不默认（不自动）“继承”其父元素宽度的。

参考链接

  1. CSS（层叠样式表）,by mozilla.
  2. CSS3 框大小,by runoob.com.
  3. 不让padding影响元素的宽度,by DecemberCafe.
  4. 改变CSS世界纵横规则的writing-mode属性,by 张鑫旭.
  5. 重新认识Pixel、DPI / PPI 以及像素密度,by Leon.
  6. CSS画三角形，箭头,by 麦西的西.
  7. 如何用 CSS 画三角形和箭头,by 前端技术.
  8. 深入理解CSS系列（二）：为什么height:100%不生效？,by ChessZhang.
  9. height：100%失效解决办法,by 当然我没扯淡.
  10. css之单行缩略..以及多行缩略,by 秋天的故事.
  11. CSS尺寸单位 % px em rem 详解,by HDWK.
  12. 如何修改placeholder样式,by 风火星辰.
  13. 一行 CSS 代码实现整个网站网页变黑白灰的效果,by 老唐.
  14. CSS hide placeholder on print [duplicate],by stackoverflow.
  15. 深入理解float浮动属性,by 知乎用户1sIGTn.
  16. css的继承之width属性（容易忽略）,by 秋天的鱼.

发表于

世界上绝大多数人不会因努力工作而致富，实现个人财务自由，但是却会因一场大病而使整个家庭陷入贫困。因此，保持健康的身体，远离疾病也是一种投资，虽不会因此致富，但却能提高我们的生活质量，减少看病支出，间接实现财富的增值。那么如何保持身体健康，远离疾病呢?

人会生病，主要受到三个因素的影响：

  • 先天性因素，即从娘胎里带出来的疾病。
  • 接触性因素，分为环境因素和饮食因素。环境因素即人处在糟糕的环境中导致疾病。饮食因素即人摄入不健康的食物导致疾病。
  • 生活性因素。人的身体像机器一样，需要爱护和保养，不正常的生活作息规律将导致疾病。

先天性因素导致的疾病是无法避免的，接触性因素中的环境因素可以很好的避免，大不了换个环境，但接触性因素中的饮食因素和生活性因素就需要人的毅力去克服。保持良好的生活作息习惯和遵循健康的饮食习惯将是我们对抗疾病的主战场。

参考链接

  1. 如何致富不靠运气,by jackhuang.

发表于 | 更新于

本文梳理记录Matlab的基本知识，为Simulink仿真打下基础。

矩阵和数组

矩阵和数组是 MATLAB® 中信息和数据的基本表示形式。

数组元素选取

  • 应用单个条件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
rng default
A = randi(15,5)

A = 5×5

    13     2     3     3    10
    14     5    15     7     1
     2     9    15    14    13
    14    15     8    12    15
    10    15    13    15    11

B = A < 9

B = 5x5 logical array

   0   1   1   1   0
   0   1   0   1   1
   1   0   0   0   0
   0   0   1   0   0
   0   0   0   0   0

A(B)

ans = 8×1

     2
     2
     5
     3
     8
     3
     7
     1
  • 应用多个条件
1
2
3
4
5
6
7
8
9
A(A<9 & A>2)

ans = 5×1

     5
     3
     8
     3
     7
  • 替换符合条件的值
1
2
3
4
5
6
7
8
9
A(A>10) = 10

A = 5×5

    10     2     3     3    10
    10     5    10     7     1
     2     9    10    10    10
    10    10     8    10    10
    10    10    10    10    10

删除数组元素

1
2
A = [1 2 3 4 5];
A(3) = [];  % 删除第三个元素

这样，数组 A 中的第三个元素就被删除了，它的值从 3 变成了 4。注意，这个操作会改变原始数组 A 的大小和内容，因此需要谨慎使用。

添加数组元素

1
2
3
4
5
6
7
# 方法一
A=[A;2]

# 方法二
A=[];
A(1)=2;
A(2)=3;

数据类型

  • 数值类型

MATLAB® 中的数值类包括有符号和无符号整数、单精度和双精度浮点数。默认情况下，MATLAB 以双精度浮点形式存储所有数值。

  • 字符和字符串

字符数组和字符串数组用于存储 MATLAB® 中的文本数据。

字符串拼接是常用操作，通常有三种方法，请参考：

日期时间数据类型 datetime、duration 和 calendarDuration 支持高效的日期时间计算、比较以及格式化显示方式。

使用duration时要注意跨 24:00:00 的问题。

日期转字符串主要使用datestr函数：

1
2
t = [datetime('now');datetime('tomorrow')]
DateString = datestr(t)
  • 分类数组

categorical 是用于存储具有以下特征的数据的数据类型：此类数据值来自离散分类有限集合。

  • 表

table 是一种适用于以下数据的数据类型：即以列的形式存储在文本文件或电子表格中的列向数据或者表格数据。表由若干行向变量和若干列向变量组成。表格中的每个变量可以具有不同的数据类型和大小，但有一个限制条件是每个变量的行数必须相同。

  • 时间表

timetable 是一种特定类型的表，其中每一行关联一个时间。与 table 一样，timetable 数据类型可以存储具有相同行数的列向数据变量。所有表函数都使用时间表。此外，时间表提供了特定于时间的函数，可对一个或多个时间表进行对齐、合并，以及执行计算。

  • 结构体

结构体数组是使用名为字段的数据容器将相关数据组合在一起的数据类型。每个字段都可以包含任意类型的数据。使用 structName.fieldName 格式的圆点表示法来访问结构体中的数据。

  • 元胞数组

元胞数组是一种包含名为元胞的索引数据容器的数据类型，其中的每个元胞都可以包含任意类型的数据。

  • 函数句柄

函数句柄是一种表示函数的 MATLAB® 数据类型。函数句柄的典型用法是将函数传递给另一个函数。例如，您可以将函数句柄用作基于某个值范围计算数学表达式的函数的输入参数。

函数句柄可以表示命名函数或匿名函数。要创建函数句柄，请使用 @ 运算符。

  • 字典

字典是一种将每个键与对应的值相关联的数据结构体。键和值可以采用任何数据类型，为数据访问提供优于数组索引的灵活性，并能提高性能。

  • 时间序列

时间序列表示动态规模或过程的时间演化。它们用于识别、建模和预测在离散时间间隔内采样的数据中的模式和行为。

对于此类型的数据，推荐使用时间表而非 timeseries 对象。时间表可以存储各种类型的时间戳数据，并具有广泛的支持函数来对齐、组合和执行计算。

  • 数据类型标识

MATLAB® 有许多函数可识别变量的数据类型或确定变量是否具有特定的数据类型。当调用或编写的代码依赖于具有特定数据类型的变量时，应使用这些函数。

  • 数据类型转换

MATLAB® 有许多函数可将值从一种数据类型转换为另一种数据类型，以用于不同的上下文。

Matlab App

Matlab App的设计开发请参考：

Matlab App的打包请参考：

Matlab函数设计

基本设计

函数的输入输出参数应该有明确的含义，最好通过参数名称即可识别。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function y = square(x)
%
%  calculate the square of the given number 'x'
%  
%  Arguments:
%  
%       x           (input)   value to be squared
%
%       y           (output)  the result of the square
%       

  y = x*x;

% end of square function

输入验证

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function a = findArea(width,varargin)
   defaultHeight = 1;
   defaultUnits = 'inches';
   defaultShape = 'rectangle';
   expectedShapes = {'square','rectangle','parallelogram'};

   p = inputParser;
   validScalarPosNum = @(x) isnumeric(x) && isscalar(x) && (x > 0);
   addRequired(p,'width',validScalarPosNum);
   addOptional(p,'height',defaultHeight,validScalarPosNum);
   addParameter(p,'units',defaultUnits,@isstring);
   addParameter(p,'shape',defaultShape,...
                 @(x) any(validatestring(x,expectedShapes)));
   parse(p,width,varargin{:});
   
   a = p.Results.width*p.Results.height; 
end
1
2
3
4
a = findArea(7);
a = findArea(7,3);
a = findArea(13,'shape','square');
a = findArea(13,'units',"miles",'shape','square');

参考链接

  1. 【Matlab学习笔记】（六）基本数据结构（矩阵定义方法）,by 末树之墨.
  2. MATLAB中是否有“队列”？,by tencent.
  3. containers.Map, by mathworks.
  4. Matlab的memory模块消除代数环,by ilovematlab.
  5. Parameterize a Referenced Model Programmatically,by mathwork.
  6. 使用 App 设计工具创建并运行简单 App,by mathworks.
  7. MATLAB App Designer如何打包EXE安装程序,by 阿Q在江湖.
  8. MATLAB 数据类型,by mathwork.
  9. matlab 字符串拼接的3个方式:[]、strcat、sprintf,by qing101hua.
  10. 查找符合条件的数组元素,by mathworks.

发表于

美国风险投资家 Naval Ravikant 有一个很有名的长推特，一共40条，题目叫做《如何致富，不靠运气》，谈了他的商业观。

现摘抄一些令人振聋发聩的观点：

  • 去寻求财富，而非金钱或地位。财富就是你拥有资产，而资产在你睡觉的时候都还在为你赚钱；金钱是我们转换时间和财富的工具；身份是你在社会等级体系里所处的位置。

  • 你不会通过出租自己的时间而变得富有。你必须拥有产权，也就是生意的一部分，以此才能赢得个人财务自由。

  • 在选择商业合作伙伴的时候，选择那些高智商、精力旺盛的家伙，但在这一切之上，他应该是个正直诚实的人。

  • 不要和愤世嫉俗者和悲观主义者合作，因为他们会任由坏事发生，以此证明他们的负面看法是正确的。

  • 学会如何销售，学会如何创建。如果你同时能做到这两件事，你的成功将无可阻挡。

  • 独到知识是那种不可以通过培训而获得的知识。这是因为，如果这种知识可以经由培训而得，那么其他人同样也可以，并且以此取代你。

  • 财富增长需要使用杠杆。商业杠杆有三个来源：1、资本；2、人力；3、复制起来边际成本为零的产品（如：代码和媒体）。

  • 资本和劳动力是需要征得许可才能使用的杠杆。每个人都在追逐资本，但总得有个什么人给你才行；每个人都想要领导其它人，但总得有什么人愿意跟着你才行。

  • 代码和媒体是无需要许可即可使用的杠杆。它们是新贵人群背后的杠杆，你可以通过自己创建的软件和媒体，在睡觉时仍然为你干活。

参考链接

  1. 和菜头翻译 如何不靠运气致富,by 和菜头.

发表于 | 更新于

因为Win10的安全问题和Win7用户习惯问题，新电脑要求装Win7系统。但是Win7系统中没有自带USB3.0驱动和固态硬盘nvme驱动，导致安装或启动Win7时USB3.0的鼠标和键盘无法识别，无法操纵。经过研究，决定在Win7原版镜像基础上，注入USB3.0和nvme驱动。

所需工具

  • DISM++

Dism++是一个Dism的GUI版，但是并不依赖Dism(Deployment Image Servicing and Management)，直接基于更底层的CBS(Component Based Servicing Reference)。

Dism是一个命令行工具，可用于服务和准备Windows映像，包括用于Windows PE、Windows恢复环境（Windows RE）和Windows安装程序的映像。

  • easybcd

EasyBCD是由NeoSmart Technologies开发的程序，用于配置和调整启动配置数据，该启动数据库最初是在Windows Vista中引入的，并在以后的所有Windows版本中使用。EasyBCD可用于为可同时安装某些版本的Windows，Linux，BSD和Mac OS X的计算机设置多重启动环境。例如删除OneKey Ghost启动项。

  • UltraISO

UltraISO 是一个运行在Microsoft Windows平台上的用来创建、修改和转换ISO文件的软件。自从2002年4月20日UltraISO首次发布以来，它的开发公司EZB Systems就把它定义为一个共享软件。当前EZB Systems域名的注册地址在中国深圳。

UltraISO用于替换Windows启动镜像中的boot.wim和install.wim。

注入原理

Windows7原版镜像中有两个重要文件：install.wim和boot.wim。boot.wim本质时WinPe，用于安装Windows7时的启动，install.wim镜像文件用于Windows7安装后的启动。使用工具Dism++在boot.wim和install.wim中注入USB3.0和nvme驱动，可以确保Windows7系统在安装和启动过程中识别USB3.0的键盘和鼠标，以及固态硬盘，从而保证Windows7的顺序安装和启动。

封装步骤

当前很多笔记本已不再支持Win7操纵系统，强行在新机器上安装Win7会出现很多问题。通过验证，总结了如下使用Win7封装步骤：

  1. 制作WeiPE启动盘。WeiPE启动盘使用Win8PE，在新机器上能运行，同时也支持光盘启动。当使用Win7安装盘在新机器上安装操作系统时，如果出现USB3.0鼠标键盘无响应，可尝试使用WeiPE进入Win8PE，然后在Win8PE安装Win7操作系统到新机器上，同时在使用Dism++注入USB3.0和nvme驱动到Win7操作系统中。
  2. 封装Win7系统盘，主要处理boot.wim和install.wim两个文件。boot.wim主要用于自启动安装Win7操作系统，应在其中注入usb3.0和nvme驱动，防止出现安装时无法识别USB3.0的键盘和鼠标，以及固态硬盘的情况。install.wim是Win7的主要文件，使用Dism++在其中注入系统更新和常用软件。
  3. 下载EasyDrv驱动安装包，用于给机器安装相应驱动。

通过上述三张光盘，相信安装Windows7操作系统不再是麻烦。

相关概念

  • WinPE

一种迷你系统，通常体积比较小，只有300MB左右。用于安装系统或者修复系统问题。

  • WinRE

跟WinPE几乎一样，只是WinRE更加侧重于系统修复，并且Vista以后系统自带WinRE，因此我们可以在WinRE做原本在WinPE里做的事情。

  • 映像文件（Image File）

一种文件载体，可以保存系统映像。在Dism++中，映像文件有WIM、SWM、ESD以及ISO。

  • UEFI

统一可扩展固件接口（英语：Unified Extensible Firmware Interface，缩写UEFI）是一种个人电脑系统规格，用来定义操作系统与系统固件之间的软件界面，作为BIOS的替代方案。可扩展固件接口负责加电自检、联系操作系统以及提供连接操作系统与硬件的接口。

  • BIOS

BIOS是Basic Input/Output System的缩写，中文：基本输入输出系统，亦称为ROM BIOS、System BIOS、PC BIOS，是在通电引导阶段运行硬件初始化，以及为操作系统提供运行时服务的固件。BIOS最早随着CP/M操作系统的推出在1975年出现。BIOS预安装在个人电脑的主板上，是个人电脑启动时加载的第一个软件。

现在，BIOS的作用是初始化和测试硬件组件，以及从大容量存储设备（如硬盘）加载引导程序，并由引导程序加载操作系统。BIOS还为DOS操作系统提供键盘、显示及其他I/O设备的硬件抽象层。

许多BIOS程序都只能在特定电脑型号或特定主板型号上运行。早年，BIOS存储于ROM芯片上；现在的BIOS多存储于闪存芯片上，这方便了BIOS的更新。

UEFI是旧式BIOS的后继者。

参考链接

  1. win7原版镜像注入USB3.0和nvme驱动,by 家麟.
  2. 连这都知道，足以证明你是windows系统安装的老司机了,by IT教主.
  3. UEFI与Legacy+UEFI的区别有多大，不弄清楚要吃大亏！,by 快启动.
  4. BIOS,by wikipedia.
  5. Windows PE入门基础知识：Windows PE的作用、命名规则、启动方式、启动原理,by 毛毛虫的爹.
  6. Wpeinit and Startnet.cmd: Using WinPE Startup Scripts,by microsoft.
  7. WIN7进阶篇，如何制作封装USB3.0，NVME驱动的WIN7镜像,by Dior.
  8. Win7安装驱动提示“无法验驱动程序数字签名”怎么办？,by 左边右转第二排的张大爷.

发表于 | 更新于

基本概念

显示相关

  • dip

设备独立像素（density-independent pixel, dip）也叫逻辑分辨率，是一种可以被程序所控制的虚拟像素，在Web开发中对应CSS像素。

  • pp

物理像素（physical pixel, PP）也叫设备像素，由设备的屏幕决定，其实就是屏幕中控制显示的最小单位。例如，华为荣耀V20的屏幕显示分辨率2310*1080即为物理像素。

  • dpr

设备像素比（device pixel ratio,dpr）计算公式如下：

$$dpr=物理像素/设备独立像素$$

这条公式成立的前提是，缩放比Scale为1，原因下面讲到缩放的时候就会知道。根据这种关系，如果设备像素大于设备独立像素（DPR大于1的设备，我们常说的高清屏或者视网膜Retina屏），就会出现一个设备独立像素对应多个设备像素的情况。

在JavaScript中，可以通过window.devicePixelRatio获取到当前设备的dpr，但遗憾的是并不是所有的都支持。

通过访问mydevice,可获得各类显示屏的dpr、dpi等参数信息。 例如，通过访问该网站可知华为荣耀V20的dpr为3。

  • rpx

微信小程序对于rem的一种应用规定，官方规定屏幕宽度为20rem，规定屏幕宽为750rpx，因此微信中1rem=750/20rpx，iphone6下，1px=1rpx=0.5pt，使用rpx作为单位，微信小程序会自动在不同的分辨率下进行转换，而使用px为单位不会转换，iphone6p下1px=0.6rpx；

  • rem

在移动端做适配通常用rem作为单位，rem是根据html的fontsize去动态计算实际px；

  • pt

pt是逻辑分辨率，pt的大小和屏幕尺寸有关系，简单可以理解为长度和视觉单位；1个pt可以有1个px，也可以有2个，3个或更多的px，但人的视网膜极限为2倍@2x，增加再多也不会让屏幕看起来更加好了，比如iphone6，2个px构成一个pt，ip6以物理像素750*1334这视觉稿进行设计；

自定义组件

参考链接

  1. px、rpx、rem、pt、dpr学习笔记,by puxiaotaoc.
  2. 不要再问我移动适配的问题了,by 写Bug.
  3. 微信小程序日期时间选择器以及组件封装,by 大专栏.
  4. 微信小程序template模板与component组件的区别及使用方法,by 小破孩呦.
  5. 小程序app.js中onLaunch和主页的onLoad方法问题,by Feebas.
  6. 微信小程序分享参数传递（微信小程序获取分享path参数）,by longlongValue.
  7. 微信小程序（四）：通过list列表跳转详情页,by 扎哈的信徒.
  8. 2.2 WXML 模板,by 微信开放社区.
  9. 微信小程序-表单验证（WxValidate使用）,by chibimarukochan.
  10. JS数组的深浅拷贝,by 蜗牛-.
  11. js正则校验数字和字母字符串,by hacker_LeeFei.
  12. 微信小程序onLaunch异步，首页 onLoad 先执行 ?,by juejing.
  13. 解决微信小程序 app onLaunch异步请求，在没有请求执行完就加载首页了的问题,by admin.
  14. 微信小程序canvas尺寸设置,by 楠倏之语.
  15. WeUI组件库快速上手,by weixin.

发表于 | 更新于

流程图是表示算法、工作流或流程的一种框图表示，它以不同类型的框代表不同种类的步骤，每两个步骤之间则以箭头连接。这种表示方法便于说明解决已知问题的方法。流程图在分析、设计、记录及操控许多领域的流程或程序都有广泛应用。遵循规范绘制流程图，不仅可提高流程图的可读性，还可以美化流程图。

流程图的三大结构

流程图由三大结构构成，这三大结构分别为顺序结构、选择结构和循环结构，这三个结构构成了流程执行的全过程。

  • 顺序结构

在顺序结构中，各个步骤是按先后顺序执行的，这是一种最简单的基本结构。

  • 选择结构

选择结构又称分支结构，选择结构用于判断给定的条件，根据判断的结果判断某些条件，根据判断的结果来控制程序的流程。

  • 循环结构

循环结构又称为重复结构，就是流程在一定的条件下，反复执行某一操作的流程结构。循环结构下又可以分为当型结构和直到型结构。

绘制流程图中的注意事项

  • 绘制流程图时，为了提高流程图的逻辑性，应遵循从左到右、从上到下的顺序排列。

  • 绘制流程图时，为了提高流程图的逻辑性，应遵循从左到右、从上到下的顺序排列。一个流程从开始符开始，以结束符结束。开始符号只能出现一次，而结束符号可出现多次。若流程足够清晰，可省略开始、结束符号。

  • 菱形为判断符号，必须要有“是和否（或Y和N）”两种处理结果，意思是说，菱形判断框一定需要有两条箭头流出；且判断符号的上下端流入流出一般用“是（或Y）”，左右端流入流出用“否（或Y）”。

  • 同一流程图内，符号大小需要保持一致，同时连接线不能交叉，连接线不能无故弯曲。

  • 流程处理关系为并行关系的，需要将流程放在同一高度。

  • 必要时应采用标注，以此来清晰地说明流程，标注要用专门的标注符号。

  • 处理流程须以单一入口和单一出口绘制，同一路径的指示箭头应只有一个。

  • 同一路径的指示箭头应只有一个。

  • 流程图中，如果有参考其他已经定义的流程，不需重复绘制，直接用已定义流程符号即可。

参考链接

  1. 画了多年的流程图，你真的画规范了吗？,by Hiphop村.
  2. 流程图,by wikipedia.

发表于

大数据，官方定义是指那些数据量特别大、数据类别特别复杂的数据集，这种数据集无法用传统的数据库进行存储，管理和处理。大数据的主要特点为数据量大（Volume），数据类别复杂（Variety），数据处理速度快（Velocity）和数据真实性高（Veracity），合起来被称为4V。

Apache Hadoop则是大数据应用的关键基础设施，本质上是一款支持数据密集型分布式应用程序的开源软件框架。它被设计成从单个服务器扩展到数千台机器，每台机器都提供本地计算和存储。Apache Hadoop本身不是依赖硬件来提供高可用性，而是设计用于检测和处理应用程序层的故障，因此在计算机集群上提供高可用性服务，但每个集群都可能容易出现故障。

Hadoop历史

Hadoop最早由美国工程师Doug Cutting开发。Doug Cutting同样是用于全文检索和搜索的开放源码程序库Lucene和开源搜索引擎Nutch的作者。

在Google发表的三篇有关GFS、MapReduce和BigTable的技术论文基础上，Doug Cutting分别开发了HDFS（Hadoop分布式文件系统）、MapReduce编程模型和用来处理海量数据的非关系型数据库HBase，它们共同构成了Hadoop。因此，本质上Hadoop是Google大数据系统的开源实现。

各大公司包括Yahoo、IBM、Facebook、亚马逊、阿里巴巴、华为、百度、腾讯等都采用Hadoop构建自己的大数据系统，使Hadoop成为了分布式计算系统事实上的国际标准。

Hadoop框架

Hadoop框架构成如图1所示。下面简单介绍Hadoop框架中的重要组件。

Hadoop框架构成

图1 Hadoop框架构成

HDFS

Hadoop分布式文件系统(HDFS)被设计成适合运行在通用硬件(commodity hardware)上的分布式文件系统。它和现有的分布式文件系统有很多共同点。但同时，它和其他的分布式文件系统的区别也是很明显的。HDFS是一个高度容错性的系统，适合部署在廉价的机器上。HDFS能提供高吞吐量的数据访问，非常适合大规模数据集上的应用。HDFS放宽了一部分POSIX约束，来实现流式读取文件系统数据的目的。

HBASE

Hbase是一种分布式存储的NoSQL数据库，它参考了谷歌的BigTable建模，实现的编程语言为Java。它是Apache软件基金会的Hadoop项目的一部分，运行于HDFS文件系统之上，为 Hadoop 提供类似于BigTable 规模的服务。因此，它可以对稀疏文件提供极高的容错率。

MapReduce

MapReduce是Google提出的一个软件架构，用于大规模数据集（大于1TB）的并行运算。概念“Map（映射）”和“Reduce（归纳）”，及他们的主要思想，都是从函数式编程语言借来的，还有从矢量编程语言借来的特性。

当前的软件实现是指定一个Map（映射）函数，用来把一组键值对映射成一组新的键值对，指定并发的Reduce（归纳）函数，用来保证所有映射的键值对中的每一个共享相同的键组。

HIVE

数据仓库之父比尔·恩门（Bill Inmon）在 1991 年出版的“Building the Data Warehouse”（《建 立数据仓库》）一书中所提出的定义被广泛接受——数据仓库（Data Warehouse）是一个面 向主题的（Subject Oriented）、集成的（Integrated）、相对稳定的（Non-Volatile）、反映历史 变化（Time Variant）的数据集合，用于支持管理决策(Decision Making Support)。

Apache Hive则是一个建立在Hadoop架构之上的数据仓库。它能够提供数据的精炼，查询和分析。Apache Hive起初由Facebook开发，目前也有其他公司使用和开发Apache Hive，例如Netflix等。亚马逊公司也开发了一个定制版本的Apache Hive，亚马逊网络服务包中的Amazon Elastic MapReduce包含了该定制版本。

hive是基于Hadoop的一个数据仓库工具，可以将结构化的数据文件映射为一张数据库表，并提供简单的SQL查询功能，可以将SQL语句转换为MapReduce任务进行运行。其优点是学习成本低，可以通过类SQL语句快速实现简单的MapReduce统计，不必开发专门的MapReduce应用，十分适合数据仓库的统计分析。

Spark

Apache Spark是一个开源集群运算框架，最初是由加州大学柏克莱分校AMPLab所开发。相对于Hadoop的MapReduce会在运行完工作后将中介数据存放到磁盘中，Spark使用了存储器内运算技术，能在数据尚未写入硬盘时即在存储器内分析运算。Spark在存储器内运行程序的运算速度能做到比Hadoop MapReduce的运算速度快上100倍，即便是运行程序于硬盘时，Spark也能快上10倍速度。Spark允许用户将数据加载至集群存储器，并多次对其进行查询，非常适合用于机器学习算法。

Storm

Storm是一个分布式计算框架，主要由Clojure编程语言编写。最初是由Nathan Marz及其团队创建于BackType，该项目在被Twitter取得后开源。它使用用户创建的“管（spouts）”和“螺栓（bolts）”来定义信息源和操作来允许批量、分布式处理流式数据。最初的版本发布于2011年9月17日。

Storm应用被设计成为一个拓扑结构，其接口创建一个转换“流”。它提供与MapReduce作业类似的功能，当遇到异常时该拓扑结构理论上将不确定地运行，直到它被手动终止。

参考链接

  1. hadoop和大数据的关系？和spark的关系？,by 小枣君.
  2. Apache Hadoop,by hadoop.
  3. HBase 深入浅出,by 沈钊伟.
  4. MapReduce,by wikipedia.
  5. Apache Spark,by wikipedia.
  6. Apache Storm,by wikipedia.
  7. Apache Hive,by wikipedia.
  8. Hive学习之路 （一）Hive初识,by 扎心了，老铁.