背景

掘金最近上了一个活动，用来庆祝中秋佳节，想薅羊毛获取奖品，因此突发奇想顺便给自己的技术领域扩展一下，之前对VR、AR技术感兴趣，干脆趁这这个机会去尝试开发一个XR小程序。

涉及知识点：

1. 小程序XR-Frame框架
2. 小程序云函数
3. 天气 API
4. 地理位置 API

方案设计

产品设计

• 目标用户：对AR技术感兴趣的开发同学
• 作用：利用AR给大家营造一种中秋气氛感觉

整体功能设计如下：

1. 通过小程序进来后，获取当前位置坐标，转换成具体的地址，然后获取天气
2. 打开摄像头进行【千里共婵娟】，需要将手机对着月亮的位置，然后才出现3D月亮模型
3. 看到月亮后，可以点击月亮 查看一共有多少人与你一起赏月
4. 分享给家人或朋友，会在屏幕下面出现一排人与你一起赏月
5. 彩蛋，不同手势，会触发不同场景，比如：比心，会掉下很多爱心， 比6，会掉下很多666表情

实现思路

1. 核心功能：利用小程序XR-FRAME框架实现3d月亮展示
2. 开发框架直接用原生微信小程序开发即可，一共就3个页面
3. 后台数据保存直接用云函数即可，主要保存访问用户数据量

必备知识

小程序原生开发基础知识，我这里就不详细说了，主要讲

XR-Frame学习

是什么？ 官方介绍如下：

xr-frame是一套小程序官方提供的XR/3D应用解决方案，基于混合方案实现，性能逼近原生、效果好、易用、强扩展、渐进式、遵循小程序开发标准。

云函数使用

项目开发

摄像头显示月亮

调用云函数存储用户数据

结合GitHub Action持续集成交付

所有源码均以上传到Github

体验版

这里放个小程序二维码图片，大家感兴趣可以扫一下体验一版本。

参考资料

• 小程序XR-FRAME指南

背景

参考资料

盘点开源“Copilot”，do it yourself
如何搭建免费的GitHub Copilot？

介绍

面试题经常会提到一个问题，就是前端安全问题哪些，我们基本上都回答上来以下几个：

• XSS脚本攻击，利用网站漏洞，注入非法脚本
• CSRF跨站请求伪造，攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求
• 运营商劫持，一般是经过某些运营商DNS网关后，在外层套入iframe，然后实现页面劫持

但是在前端安全中，还有一个问题就是 ：JS原型链污染， 那么是原型链污染怎么回事，请看下面详细介绍。

这里插入一条新闻，新出一个很邪恶的js库叫Evil.js，名字还取得很lodash，其中主要就是利用原型prototype进行重写项目中常用的方法，如：

• Array.map 有5%概率会丢失最后一个元素，
• 当数组长度可以被7整除时，Array.includes 永远返回false。

所以学会如何防御项目内被攻击，了解更多JS原型安全知识很重要，起码周末不用调试半天问题，才发现项目中代码被恶意写入。

背景

最近在打开一些网站的，查看其CSS样式的时候，发现如下图：

所以就很好奇，原来现在CSS样式变量已经可以正式投入生产使用了，所以希望能够做个简单了解。

浏览器的兼容性：

简介

由于自己参与过低代码平台开发，所以希望能把我自己开发低代码中遇到的问题或者一些设计思路进行总结汇总，这是开始写的第一篇，也是比较基础的一篇，关于低代码平台的介绍会放在介绍篇章，这篇就不做过多介绍。

这里为什么会一开始介绍js沙箱设计呢？

因为低代码平台，会运行用户本身自己编写的业务逻辑代码，这里就需要平台去运行用户写的js代码，但是js代码保存到数据库是一个字符串，那么平台应该怎么运行呢？

答案是js沙箱，那么如何设计一个沙箱呢？按照低代码平台的需要特性，主要以下几方面：

• 隔离，隔离是为了保证当前执行代码不影响整个平台的代码
• 插入，沙箱允许插入平台的内置对象
• 容错，沙箱内代码即使有错误，也不影响整个平台执行

主要步骤

• 添加站点地图 sitemap.xml文件和搜索机器人文件robots.txt
• 提交站点到搜索引擎(百度和谷歌)
• hexo针对搜索的优化

添加站点地图

添加站点地图 sitemap.xml

1. 添加hexo插件

   1 2	npm install hexo-generator-sitemap --save npm install hexo-generator-baidu-sitemap --save

2. 修改_config.yml配置

1
2
3
4

sitemap: 
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

搜索机器人文件robots.txt

在source目录下新建robots.txt文件，文件内容如下：

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

User-agent: *
Allow: /
Allow: /archives/
Allow: /categories/
Allow: /tags/ 
Allow: /resources/ 
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

Sitemap: https://hoxis.github.io/sitemap.xml
Sitemap: https://hoxis.github.io/baidusitemap.xml

主要以下几方面去收集？

• 八股文，主要针对理论基础知识
• 框架类，主要针对React/Vue等
• 编程题，主要针对各种常用方法进行手动编写
• 算法题，主要是各类算法题进行汇总

简介

由于在面试经常会遇到问题null，undefined，NaN之间的区别，因此想要深入且系统了解一下这些代表空之间的区别，以及它们底层的原理——原型链，同时还要搞明白__proto__和prototype分别是什么。

为了更好系统的理解null，undefined，NaN之间的区别和关系，我们需要从Javascript语言设计底层去理解，为什么一个空值需要设计这么多个。为什么不能像Java，一个null就可以满足？

我们先简单认识三者：

• undefined 表示原始值undefined。它是一个 JavaScript 的 原始数据类型
• null 特指对象的值未设置。它是 JavaScript 基本类型 之一。
• NaN 是一个表示非数字的值

接下来主要从以下两个点去认识null，undefined，NaN之间的区别和关系：

• 数据类型 typeof
• === 判断
• 原型 prototype

背景

最近从网上看到一个有趣的CSS应用，就是纯用CSS也能是父子树展示，具体效果如下：

• 目录节点1

  • 节点1

    • 子节点1-1
    • 子节点1-2
  • 节点2

    • 子节点2-1
    • 子节点2-2

然后里面关联到一篇新闻，就是:has伪元素的出现会给CSS带来极大的变动，这是为什么，不就是一个CSS伪元素吗？因此去了解一下，才发现这个伪元素确实不一样，主要有以下几点：

• 可以选择父级元素， a:has(> img)，包含img元素的a元素
• 可以选择兄弟元素， h1:has(+ p)，后面为p元素的h1元素

为什么有了它之后，CSS会有大变动，因为以往我们的样式都是直接选择 元素 或者 子元素 或者 后面的元素，如果要选择父元素或前面的元素只能通过命名规范去确定，比如上述两个例子：

• a:has(> img)，我们只能通过a.has-img类似样式去命名
• h1:has(+ p)，只能通过h1.next-p类似样式去命名

大概清楚它能带来的变化，接下来我们来详细了解一下它。

背景

之前研究过一篇《移动端适配总结》，里面主要通过布局不变，改变布局组件元素的大小去适应移动端。但是这种方式对于PC端或者Pad等大屏幕并不适合，所以从想找找看是否有新的方案能否满足跨端自适应布局方式。

目前同时解决PC端和移动端的响应式布局的解决方案以下几种：

• 通过@media媒体查询去设置不同尺寸的样式
• 通过Flexbox Grid等现代化布局去做响应式布局