早些时候有看到过一个 纯CSS轮播图 的文章，当时有研究过实现，大概是利用了 hash (锚标记) 和 scroll-snap 来实现的，但是具体实现已经回忆不起来了。

正好现在分享群组里边暂时没有主题了，就想着可以当成一个常驻的补位小环节，大家一起浏览 CodePen 之类的社区找一个大家都感兴趣的 Demo 来研究。
在分享前还是需要自己重新研究一遍的，不然在讲述的时候出错可太 “甜蜜的” 尴尬了。

之前在一篇 帖子 中看到了一个名词 【阻断权重传递】，进而去了解一下这个名词。

阅读相关资料的过程中，收集了3个 no 开头的关键词(noopener、noreferrer 和 nofollow)，并且作为相似内容整理成这篇笔记。

太长不看版：

• noopener: 使用target="_blank"所打开的页面，将无法获取 window.opener 对象。
• noreferrer: 使打开的页面无法获取 document.referrer 信息。
• nofollow: 表明对该链接不认可，不传递权重。

如果有兴趣可以接着看下去

在写 上一篇文章 的时，文章开头有一张示例图，为了节省空间，我用的图片一般都不会很大，并且那张图只是Google出来的，没有调整就直接放上来了。

在列表页看着图片居左就很难受，想要把它居中放置，但是不想用 HTML 的方式来写，就突然想起来早前有看到过 肉大的一篇分享，是通过 CSS 的 属性选择器 来实现的，就想着自己也可以整理一下，然后放到博客的主题当中使用，以后图片排版就会方便很多。

最近大屏又开始火了，群里好多人又开始捡起来了数据可视化，我也一样遇到了新得是数据可视化项目，但是这次不是说 ECharts，而是数据大屏上的所谓 “科技感” 容器，比如下图：

可以看到很多的边框，虽然说可以直接让 UI 小姐姐 切给我们出来所有不同规格的背景图片来解决问题，但是就需要 UI 一份一份切给我们，就很麻烦，而且占用首屏加载的资源。
我就想是否可以用一些精灵图来完成，或者一些简单的边框可以直接使用一些 CSS 的奇技淫巧来完成。

我从花瓣上找了一些示例，然后通过CSS复现，接下来上实例

最近有点忙，于是又停更了一个月😂，前两天在 V2 上看到 一个帖子，需求是要做一个镂空遮罩。

回答的过程中想起来有一个 mask 属性来着，好像可以试试，但是快下班了，也没有找到合适的遮罩图，也不想打开PS自己画一个再传图床，就还是用的 clip-path 做了一个 CodePen Demo。
这两天稍微有点时间，可以考虑研究一下这个遮罩属性，以及能否搭配 filter:drop-shadow() 使用。

最近在更新博客的样式，突然想到现在的flex布局已经可以定义间距了，所以大概整理了一下关于gap这个新属性资料。

gap 属性是用来设置网格行与列之间的间隙（gutters），该属性是 row-gap 与 column-gap 的简写形式。

起初是在 Grid 布局中用 grid-gap 来设置行间距和列间距的，后来意识到 Multi-column 布局中有一个 column-gap 属性，同时存在 grid-column-gap 和 column-gap 对于开发者来说是一个很疑惑的问题。并且在大范围应用的 Flex 布局中，并没有一个很好的方法来设置行间距和列间距。

于是CSS齐属属性规范开始调整，gap 代替了grid-gap 属性，并且规范对间隙属性进行了大统一，三种布局只需要使用 gap 属性就可以设置间距样式了。

去年就开始说要更新博客主题了，拖到现在终于有点空闲时间和动力了，相信大家已经使用过 Hexo 了，安装之类的我都不多废话了，直接开始。

想要自定义一个 Hexo 主题大概需要了解一个 模板引擎，Hexo 内置了 Swig，我所用的是默认安装的 EJS，反正都差不多，都提供了一些模板语法，书写还是按照Js的方法来的。
然后先按照文档创建完主体目录结构和模板组件，就可以开始开发了，我比较偷懒没有使用 yeoman + generator-hexo-theme 来创建，直接复制了原先的 landscape 主题。

哦，对了！还要选择一个CSS预编译器，我还是没有选择适用了默认安装的 Stylus，你也可以按照习惯去安装，并且 install 对应的 Hexo 插件。

Every JavaScript object has a second JavaScript object (or null ,but this is rare) associated with it. This second object is known as a prototype, and the first object inherits properties from the prototype.
每个 JavaScript 对象都会对应一个原型对象（除了 null），并从原型对象继承属性和方法。
JavaScript 权威指南

一句话解释：对象 __proto__ 属性是JS内置的，它所对应值是原型对象的 prototype ；而 prototype 就是你自己写的原型属性、方法 加上 JS原型内置的属性、方法

new 运算符 创建 一个用户定义的 对象类型 的实例或 具有构造函数的内置对象 的实例。

完整的了解 new 运算符你可能还需要了解一下 面向对象思想 以及 原型链，可以简单查看这篇笔记 👉 原型链！ __proto__ 与 prototype

如果快速的了解 new 关键字按照MDN的文档描述来说就是：

1. new关键字会创建一个空的简单JavaScript对象（即 {}）；
2. 链接该对象（设置该对象的 constructor）到另一个对象 （绑定原型）；
3. 将 步骤1 新创建的对象作为 this 的上下文 ；
4. 如果该函数没有返回对象，则返回 this。

可以简单理解成 new 关键字帮我们处理了书写构造函数时一些固定的步骤

在实际业务场景中，最常接触到的就是拉取微信登陆了，但单纯的一个点击按钮直接微信登录的需要获取多少微信权限呢？

最少的需要使用到1个微信开放接口：wx.login，
如果需要获取用户头像和昵称，需要调用 wx.getUserProfile 方法 (wx.getUserInfo 已调整_{【尾声#1】})，并且需要在绑定在按钮上 ，并会唤起授权提示；
如果需要获取用户手机号信息，需要在按钮上绑定 getPhoneNumber 事件。

一般来说非敏感信息可以直接调用，含有敏感信息的接口需要绑定在按钮上，在用户自行操作之后才可以调用。