前端有趣技巧网站

收集前端一些好用的在技巧

1.照片位图转SVG矢量图片JS工具primitive.js

官方体验地址:https://ondras.github.io/primitive.js/在新窗口打开

2.字符动画演示

http://www.degraeve.com/img2txt.php在新窗口打开

3.excel转json

https://www.bejson.com/json/col2json/在新窗口打开

4.git-history的演示

git-history在新窗口打开

5.ES6新功能 - 链判断运算符

https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining在新窗口打开

6.快速下载youtobe视频 自备梯子

https://www.y2mate.info/youtube-converter/ 打开链接输入视频链接即可转换

7.Node.js使用nodemailer发送邮件

使用场景: 服务器出错之后自动发送邮件到指定邮箱, 从而达到异常监控通知的效果

8.markdown图片base64方式处理

有时候我们需要base64展示图片,那么内容就会很长,我们把长的base64变为变量放在最后,前面调用。

调用下面的变量

  • ![asd][tmp]
  • ![sss][yyy]

变量

[yyy]:data:image/png;base64,iVBOUhEUgAAAGgAA……

演示部分

nodemailer演示代码

// 封装邮件发送接口
const nodemailer = require('nodemailer');

// 开启一个SMTP连接
let transporter = nodemailer.createTransport({
    // host: 'smtp.qq.com',
    service: 'qq', // 需要到qq邮箱设置开通SMTP, 查看支持的邮件服务商列表 https://nodemailer.com/smtp/well-known/
    port: 465, // SMTP 端口
    secureConnection: true, // 使用了SSL
    secure: true, // true for 465, false for other ports
    auth: {
        user: 'xxxxxx@qq.com',
        pass: 'xxxxxx' // 这里密码不是qq密码,是你设置的smtp授权码
    }
})

// 填写邮件信息
let mailOptions = {
    from: '"D罗" <xxxxxx@qq.com>', // 发件人
    to: 'xxxxxx@163.com', // 收件人
    subject: '', // 标题
    // 发送text或者html格式
    text: '', // plain text body 文本格式的内容
    html: '' // html body HTML格式的内容
};

// 使用前面创建的传输器来发送邮件
let send = function (subject, content, flag) {
    if (subject && content) {
        mailOptions.subject = subject;
        if (flag === 'html') {
            mailOptions.html = content;
        }else
        {   // 默认不传flag发送text
            mailOptions.text = content;
        }
        transporter.sendMail(mailOptions, (error, info) => {
            mailOptions.text = '';
            mailOptions.html = '';
            console.log(`Message: ${info.messageId}`);
            console.log(`sent: ${info.response}`);
        })
    }
};

// 将send方法通过exports暴露出来, 便于其他模块调用
exports.send = send;

// 测试发送邮件
// send('这是邮件标题', '这是邮件内容-文本')
// send('这是邮件标题', '<b>这是邮件内容-html</b>', 'html')
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

字符动画演示

http://images.liuweibo.cn/image/common/字符动画_1553590192226_239846_1553590206001.png

git-history的演示

https://user-images.githubusercontent.com/1911623/54575634-9b10b000-49d3-11e9-8a19-56e40636e45d.gif

git-history在新窗口打开

使用方法,github.com或者gitlab.com.cn替换如下

  1. gitlab.githistory.xyz
  2. github.githistory.xyz

本地使用

npx git-file-history  path/a.vue
1

链判断运算符演示

https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining在新窗口打开 例子

const obj = {
  foo: {
    bar: {
      baz: class {
      },
    },
  },
};

const baz = new obj?.foo?.bar?.baz(); // baz instance

const safe = new obj?.qux?.baz(); // undefined
const safe2 = new obj?.foo.bar.qux?.(); // undefined

const willThrow = new obj?.foo.bar.qux(); // Error: not a constructor

// Top classes can be called directly, too.
class Test {
}
new Test?.(); // test instance

new exists?.(); // undefined
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

使用

npm install --save-dev @babel/plugin-proposal-optional-chaining
1

.babalerc

{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}
1
2
3

今日图 - 用户永远不会按照你的想法使用产品的

16a85f2fef410924.png