配置PWA要点

{
  "name": "迪诺笔记",
  "short_name": "JohnieXu's Blog",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "description": "哪里会有人喜欢孤独，不过是不喜欢失望罢了。 ——村上春树",
  "icons": [{
    "src": "logo_48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, {
    "src": "logo_72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "logo_96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    "src": "logo_144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "logo_168.png",
    "sizes": "168x168",
    "type": "image/png"
  }, {
    "src": "logo_192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "related_applications": [{
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
  }]
}

一、配置命令

配置用户名和邮箱

git config --global user.name "JohnieXu" // 配置全局用户名为JohnieXu
git config --global user.email "281910378@qq.com" // 配置全局邮箱为281910378@qq.com

查看配置

git config -l // 查看git全局配置信息
or
git config --list

前言

思考以下几个问题：

1. 原型链是什么概念， JS 中为何要引入原型链？
2. 原型链是怎样实现继承的？
3. 构造函数 constructor，proto，ES6 中 class、static、super 和原型链的关系？
4. 如何利用原型链来解释 this 的指向问题？
5. 原型链与区块链？

看下面这段代码的打印结果

function Foo() {
    return this;
}
Foo.getName = function() {
    console.log("1");
};
Foo.prototype.getName = function() {
    console.log("2");
};

new Foo.getName(); // -> 1   等价于new (Foo.getName()) 调用的是构造函数Foo本身的getName方法
new Foo().getName(); // -> 2   等价于(new Foo()).getName() 调用的是实例上(原型上)的getName方法

0-Intro

在 React 项目中使用 video.js，实现 HTML5 视频播放器的自定制。

关于 video.js：

引用官方的自我介绍：

video.js is a free and open source HTML5 video player.

前言

今天在看 ts-loader 的功能特性时看到其支持 Yarn Plug'n'Play。 于是花了一些时间了解了一下它的工作原理以及解决的问题并整理出了本篇文章。

现状与痛点

Yarn 团队开发 PnP 特性最直接的原因就是现有的依赖管理方式效率太低。引用依赖时慢，安装依赖时也慢。

前言

经常在面试中被问到“如何清除浮动？”、“为什么 overflow: hidden 可以清除浮动？”等等比较基础的问题。虽然这些题目案在各种写面试题的文章中都有提供答案，但这种教科书式的问答肯定不是我们的目的，与其记住答案不如彻底掌握其核心原理——块级格式化上下文（BFC）。

这篇文章主要就是彻底分析清楚BFC原理、总结BFC经典场景中的用法，最后在实践中总结BFC在H5、小程序开发中的应用。

引言

前端er 应该都知道奇舞周刊，这是一个技术类博客，上面汇聚了一大批优秀博客作者投稿的技术类文章。我本人每隔几天就会去看看上面的文章，但是它的官网经常打不开，每次想看文章的时候还得一页一页的翻才能找到想看的文章。或者，有时候就想随便找一篇文章看一看作为知识扩展或是温故知新。

基于阅读文章的便利性的考虑，于是开始了本次 CLI 工具的探索，这款工具的核心功能是以开发者的角度来快速的找出奇舞周刊上发布的文章链接。

主要功能

• 抓取全部文章链接
• 随机 N 篇文章链接
• 定时任务自动抓取

前言

在前一篇文章中遇到的vue路由组件缓存问题已经解决并对项目进行了适当的优化改进，但是并未开探寻究vue-router的源码，这篇就继续上次的话题，深入分析vue-router源码中对导航守卫、动态参数匹配、过渡效果和异步组件等的实现。

本文分析的源码为vue-router@3.1.3，vue@2.6.11

测试

provide提供的count：{{count}}

使用自定义组件

前言

最近在整体地复习一遍现代前端必备的核心知识点，将会整理成一个前端分析总结文章系列。这篇是其中的第三篇，主要是总结下JS中原型与继承等核心知识点。（另外，此系列文章也可以在语雀专栏——硬核前端系列查看）。

本文首发自迪诺笔记，转载请注明出处😁

前言

前段时间小米出的水印边框照片模板被大家玩的不亦乐乎，本来想着写一个实现合成各厂商带水印边框照片的工具。这个头脑一热想要开发的工具最终也没有着手实现，不过这里面有一个知识点倒是令我很感兴趣。

这一点就是：合成水印边框通常会自动带上照片的拍摄数据——光圈、快门、感光度、品牌 LOGO，那这些数据都是从哪里获取照片里面又是怎么存储的呢？

在查询了大量资料之后得知，这些参数都来自于 Exif 数据，于是对 Exif 的技术标准、读写 Exif 的 JS 框架做了一些研究，这篇文章就是据此研究总结而来。

前言

某天，我在使用 PS 时接触到一个提取色卡的插件。突然间很好奇这个插件是如何实现这个功能的呢？经过一番折腾，最终我成功地使用纯客户端技术实现了提取色卡的功能。

色卡提取如下图所示：

上图框选的部分正是色卡，是根据选择的图片实时分析计算得出的，色卡数据会随着图片编辑、修改而更新。

实现的简单 demo 效果如下：

点击【提取色卡】，则会分析图片中像素点占比排名靠前的多个颜色值（即：色卡），并将其显示出来。

背景介绍

最近在做公司后台管理系统项目时遇到一个比较怪异的bug——采用keep-alive+vue-router实现的路由缓存遇到缓存不生效的情况。

前言

在网页端、移动端H5、小程序等各个终端环境的前端开发中随处可见事件的运用，可见事件机制的是前端这一块的重中之重。经过我研读了大量博客文章以及开源框架源码后，这次算是对DOM事件机制有了更新更全面的的认识。

下文主要通过一个例子带你分析DOM事件的传递、事件处理，然后在此基础上再深入总结对事件监听的优化方案，最终总结下DOM事件机制在开源框架中的实战应用。

本文首发自JohnieXu's Blog，转载请注明出处😁