Welcome to MDGSF's Blog!

This is my github blog

PPT 入门

2019-11-09

miscellanea

PPT
4 个注意点
1. 模板
2. 素材
3. 效率神技
4. 套路
模板

http://www.officeplus.cn

素材
1. 字体
2. 图片
3. 图标
字体

免费可商用字体

思源系列
1. 思源黑体 Source San-Serif 123 是微软雅黑的完美替代品
2. 思源宋体 Source Serif 123
盘门正道
1. 盘门正道标题体 pang men 123 适合用在标题上
2. 盘门正道粗书体 pang men 123 这个是免费的书法字体
站酷系列
1. 站酷高端黑体 zcool cool black 123
2. 站酷酷黑体 zcool cool black 123
3. 站酷快乐体 zcool happy fonts 123
4. 站酷庆科黄油体 buttter font
沐瑶软笔

破产字体

付费字体
1. 喜鹊造字
2. 字魂网 https://izihun.com
字体搭配

搭配一： 思源宋体 Heavy 搭 微软雅黑 light。

适合用在一些党政风的 PPT 上面。

也适合用在一些凸显人文精神的 PPT 上面。

搭配二： 喜鹊在山林体 搭 思源黑体 CN Light。

适合用在一些时尚类的 PPT 上面，或者综艺类的 PPT 上面。

搭配三： 字魂龙吟手书 搭 微软雅黑。

适合用在一些比较大气的封面上面。

搭配四： 思源黑体 CN Bold 搭 思源黑体 CN Light。

很多科技类公司的 PPT 都是用这样的搭配。

字体嵌入 PPT

字体如果没有嵌入 PPT 的话，PPT 发送给别人了，字体就丢了。

解决方案一：PPT 和字体一起打包。

解决方案二：把特殊字体复制粘贴为图片。

解决方案三：（推荐）直接把字体嵌入 PPT 中。

图片

下面推荐 3 个免费图库：

Pixabay

Pexels

GRATISO

Foodiesfeed

NewOldStock

图标

iSlide

火柴人图标库

效率神技

Microsoft PPT: Smart Art 功能，文字一键排版。

Microsoft PPT: Smart Art 功能，图片一键排版。

图表中每列的图片替换。

套路
1. 用大图，图片越大，格调越高。
2. 需求：高端、大气、上档次、有感觉。答案：用星空图，宇宙、太空、地球、星空、星球的图片。星空图这种只能用在首页或者过渡页。如果每页都用，就审美疲劳了。
3. 如何言之有物？图文搭配。技巧：去匹配 PPT 文案中的关键字，找关键字相对于的图片。
4. 图片加蒙版。减弱图片对文字的干扰。扩大页面的可用面积。凸显设计细节。
资源

百度网盘链接:https://pan.baidu.com/s/1xMmrbG_bqBHwxuE-2ZvS1A 提取码:89i9
Read All
[Linux] iperf 基础使用

2019-11-08

mdgsf

Linux

Linux
iperf 是常用的带宽测试工具，ubuntu 可以直接用 apt 安装。
```
sudo apt-get install iperf
```
测试方法

现在电脑 1 上以服务端模式启动 iperf。
```
# iperf -s
```
然后在另一台电脑上以客户端模式启动 iperf。
```
# iperf -c 192.168.1.100 -t 60 -i 1
192.168.1.100 这里是电脑 1 的 IP 地址。
-t 60 测试60s
-i 1 1秒打印一次结果
```
Read All
[JavaScript] Math 和 Number 常用方法

2019-10-23

mdgsf

Web

js javascript
Math
```
console.log(Math.PI); // 3.141592653589793
console.log(Math.abs(-10.123)); // 10.123
console.log(Math.ceil(10.01)); // 11
console.log(Math.floor(10.01)); // 10
console.log(Math.round(10.01)); // 10
console.log(Math.round(10.9)); // 11
console.log(Math.max(1, 2, 3, 4)); // 4
console.log(Math.min(1, 2, 3, 4)); // 1
console.log(Math.random()); // 0.0626044010373974
console.log(Math.pow(2, 3)); // 8
console.log(Math.sqrt(9)); // 3
```
- abs：返回绝对值
- ceil：向上取整
- floor：向下取整
- round：四舍五入取整
- max：求最大值
- min：求最小值
- random：返回 0 到 1 之间的伪随机数
- pow(x, y)：返回 x 的 y 次幂
- sqrt(x)：返回 x 的平方根
Number
```
console.log(Number.EPSILON); // 2.220446049250313e-16
console.log(Number.MAX_VALUE); // 1.7976931348623157e+308
console.log(Number.MIN_VALUE); // 5e-324
console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991
console.log(Number.MIN_SAFE_INTEGER); // -9007199254740991
console.log(Number.POSITIVE_INFINITY); // Infinity
console.log(Number.NEGATIVE_INFINITY); // -Infinity
console.log(Number.NaN); // NaN
```
- Number.EPSILON：两个可表示(representable)数之间的最小间隔。
- Number.MAX_VALUE：能表示的最大正数。最小的负数是 -MAX_VALUE。
- Number.MIN_VALUE：能表示的最小正数即最接近 0 的正数 (实际上不会变成 0)。最大的负数是 -MIN_VALUE。
- Number.MAX_SAFE_INTEGER：JavaScript 中最大的安全整数 (2^53 - 1)。
- Number.MIN_SAFE_INTEGER：JavaScript 中最小的安全整数 (-(2^53 - 1))。
- Number.POSITIVE_INFINITY：特殊的正无穷大值，在溢出时返回该值。
- Number.NEGATIVE_INFINITY：特殊的负无穷大值，在溢出时返回该值。
- Number.NaN：特殊的“非数字”值。
参考链接

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number
Read All

[JavaScript] Set 使用

2019-10-22

mdgsf

Web

js javascript

Example

使用 Set 对象

const mySet = new Set();

// add
mySet.add(1);
mySet.add(5);
mySet.add(5);
mySet.add('some text');
const o = {a: 1, b: 2};
mySet.add(o);
console.log(mySet); // Set { 1, 5, 'some text', { a: 1, b: 2 } }

// has
console.log(mySet.has(1)); // true
console.log(mySet.has(3)); // false
console.log(mySet.has(5)); // true
console.log(mySet.has(Math.sqrt(25))); // true
console.log(mySet.has('Some Text'.toLowerCase())); // true
console.log(mySet.has(o)); // true
console.log(mySet.has({a: 1, b: 2})); // false, 这是一个新的对象

// size
console.log(mySet.size); // 4

// delete
mySet.delete(5);
console.log(mySet.has(5)); // false
console.log(mySet.size); // 3
console.log(mySet); // Set { 1, 'some text', { a: 1, b: 2 } }

// clear
mySet.clear();
console.log(mySet); // Set {}

迭代 Set

const mySet = new Set();

mySet.add(1);
mySet.add(5);
mySet.add('some text');

// 1 5 some text
for (let item of mySet) {
  console.log(item);
}

// 1 5 some text
for (let item of mySet.keys()) {
  console.log(item);
}

// 1 5 some text
for (let item of mySet.values()) {
  console.log(item);
}

// 1 1
// 5 5
// some text some text
for (let [key, value] of mySet.entries()) {
  console.log(key, value);
}

// [ 1, 1  ]
// [ 5, 5  ]
// [ 'some text', 'some text'  ]
for (let item of mySet.entries()) {
  console.log(item);
}

Set 和 Array 互相转换

// 利用 Set 给数组去重
const arr = [1, 1, 1, 2, 2, 3, 3, 3, 3];

const mySet = new Set(arr);
const newArray = Array.from(mySet);
console.log(newArray); // [ 1, 2, 3 ]

const newArray2 = [...new Set(arr)];
console.log(newArray2); // [ 1, 2, 3 ]

基本集合操作

function isSuperSet(set, subset) {
  for (let elem of subset) {
    if (!set.has(elem)) {
      return false;
    }
  }
  return true;
}

function union(setA, setB) {
  const _union = new Set(setA);
  for (let elem of setB) {
    _union.add(elem);
  }
  return _union;
}

function intersection(setA, setB) {
  const _intersection = new Set();
  for (let elem of setB) {
    if (setA.has(elem)) {
      _intersection.add(elem);
    }
  }
  return _intersection;
}

function difference(setA, setB) {
  const _difference = new Set(setA);
  for (let elem of setB) {
    _difference.delete(elem);
  }
  return _difference;
}

const setA = new Set([1, 2, 3, 4]);
const setB = new Set([2, 3]);
const setC = new Set([3, 4, 5, 6]);

console.log(isSuperSet(setA, setB)); // true
console.log(union(setA, setC)); // Set { 1, 2, 3, 4, 5, 6 }
console.log(intersection(setA, setC)); // Set { 3, 4 }
console.log(difference(setA, setC)); // Set { 1, 2 }

参考链接

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set

Read All

[JavaScript] Object 使用

2019-10-22

mdgsf

Web

js javascript

const obj = {};

// set
obj.name = 'huangjian';
obj['age'] = 1024;

// get
console.log(`obj.name = ${obj.name}`); // huangjian
console.log(`obj['name'] = ${obj['name']}`); // huangjian

// delete
obj['willBeDeleted'] = true;
delete obj['willBeDeleted']; // method one
delete obj.willBeDeleted; // method two

// update
obj['name'] = 'huangping';
obj.age = 512;

console.log(obj); // { name: 'huangping', age: 512 }

// 遍历 object
// for in 会遍历整个原型链，所以只能加上 hasOwnProperty()
//
// 输出：
// name huangping
// age 512
var hasOwnProperty = Object.prototype.hasOwnProperty;
for (let key in obj) {
  if (hasOwnProperty.call(obj, key)) {
    console.log(key, obj[key]);
  }
}

// get all keys
// Object.prototype.bar = 1; 这行代码可以测试 Object.keys(obj) 是否会遍历原型链
const keys = Object.keys(obj);
console.log(keys); // [ 'name', 'age' ]

// 访问属性，[] 和 . 的两个区别

// 属性名不是一个有效的变量名
// obj.1234 = true; // SyntaxError
obj['1234'] = true; // valid

// 变量作为 key
const key = 'editor';
obj[key] = 'vim';

Read All

[JavaScript] Map 使用

2019-10-22

mdgsf

Web

js javascript

Objects 和 maps 的比较

Objects 和 Maps 类似的是，它们都允许你按键存取一个值、删除键、检测一个键是否绑定了值。因此（并且也没有其他内建的替代方式了）过去我们一直都把对象当成 Maps 使用。不过 Maps 和 Objects 有一些重要的区别，在下列情况里使用 Map 会是更好的选择：

一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值，包括函数、对象、基本类型。
Map 中的键值是有序的，而添加到对象中的键则不是。因此，当对它进行遍历时，Map 对象是按插入的顺序返回键值。
你可以通过 size 属性直接获取一个 Map 的键值对个数，而 Object 的键值对个数只能手动计算。
Map 可直接进行迭代，而 Object 的迭代需要先获取它的键数组，然后再进行迭代。
Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。虽然 ES5 开始可以用 map = Object.create(null) 来创建一个没有原型的对象，但是这种用法不太常见。
Map 在涉及频繁增删键值对的场景下会有些性能优势。

Example

const myMap = new Map();

const keyObj = {};
const keyFunc = function() {};
const keyString = 'a string';

// set
myMap.set(keyObj, 'keyObj value');
myMap.set(keyFunc, 'keyFunc value');
myMap.set(keyString, 'keyString value');

// get size
console.log(myMap.size); // 3

// get
console.log(myMap.get(keyObj)); // keyObj value
console.log(myMap.get(keyFunc)); // keyFunc value
console.log(myMap.get(keyString)); // keyString value

// delete
myMap.set('willBeDeleted', true);
myMap.delete('willBeDeleted');

// update
const newKeyStringValue = 'new keyString value';
myMap.set(keyString, newKeyStringValue);

// has
console.log(myMap.has('notExists')); // false
console.log(myMap.has(keyString)); // true

// clear all data
myMap.clear();
console.log(myMap); // Map {}

for of

const myMap = new Map();

myMap.set(0, 'zero');
myMap.set(1, 'one');

// 0 = zero
// 1 = one
for (let [key, value] of myMap) {
  console.log(key + ' = ' + value);
}

// 0
// 1
for (let key of myMap.keys()) {
  console.log(key);
}

// zero
// one
for (let value of myMap.values()) {
  console.log(value);
}

// 0 = zero
// 1 = one
for (let [key, value] of myMap.entries()) {
  console.log(key + ' = ' + value);
}

// 0 = zero
// 1 = one
myMap.forEach(function(value, key) {
  console.log(key + ' = ' + value);
});

map and array

const kvArray = [['key1', 'value1'], ['key2', 'value2']];

const myMap = new Map(kvArray);

// array to map
console.log(myMap); // Map { 'key1' => 'value1', 'key2' => 'value2' }

// map to array
console.log(Array.from(myMap)); // [ [ 'key1', 'value1' ], [ 'key2', 'value2' ] ]

// map.keys to array
console.log(Array.from(myMap.keys())); // [ 'key1', 'key2' ]

merge

const first = new Map([[1, 'one'], [2, 'two'], [3, 'three']]);

const second = new Map([[1, 'uno'], [2, 'dos']]);

// Map对象同数组进行合并时，如果有重复的键值，则后面的会覆盖前面的。
const merged = new Map([...first, ...second, [1, 'eins']]);

console.log(merged.get(1)); // eins
console.log(merged.get(2)); // dos
console.log(merged.get(3)); // three

参考链接

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map

Read All

4/97

Welcome to MDGSF's Blog!

PPT 入门

4 个注意点

模板

素材

字体

免费可商用字体

思源系列

盘门正道

站酷系列

沐瑶软笔

破产字体

付费字体

字体搭配

字体嵌入 PPT

图片

图标

效率神技

套路

资源

[Linux] iperf 基础使用

测试方法

[JavaScript] Math 和 Number 常用方法

Math

Number

参考链接

[JavaScript] Set 使用

Example

使用 Set 对象

迭代 Set

Set 和 Array 互相转换

基本集合操作

参考链接

[JavaScript] Object 使用

[JavaScript] Map 使用

Objects 和 maps 的比较

Example

for of

map and array

merge

参考链接