解决 Nginx 413 Request Entity Too Large
最近做 Node 上传服务，NGINX 代理，因此本地测试没问题，但是发到线上 代理抛出异常； 其实这个也很简单，重新配置下 Nginx 的上传限制: server { ... listen 80; server_name localhost; client_max_body_size 20M; ... } 详情 »
查看详情
React-360 源码阅读【3】
React-360 源码阅读【3】 上一篇简单说了下 scripts 目录究竟用来做什么，今天我们开始进入到正题，我们看下Libraries 下究竟做了什么； 其实和 react-native 下的目录一致，罗列我们可用的组件和模块文件；比如: Pano Camera Sound ... 我们看下入口文件 react-360.js const React360 = { // React Native overrides get View() { return require('View'); }, get Image() { return require('Image'); }, get Text() { return require('Text'); }, // VR Components and modules get AmbientLight() { return require('AmbientLight'); }, get Box() { return require('Box'); }, get LiveEnvCamera( 详情 »
查看详情
开学第一天
不知不觉，暑假已过。 晚上时不时飘几滴小雨，饭店吃饭的老板娘，给在家乡的孩子通话，问需要什么衣服和东西。在外求学还是在外务工的人来说，开学这一天似乎始终都是充满一种思念味道的日子。依稀记得去长沙的第一天，和父亲第一次来长沙，岳麓山下来，迷了路，似乎那一次也成了这几年少有和父亲独处的日子。 书剑今年开学，上了研究生。家里的第一个，当然这自然是值得全家人骄傲的内容。妹妹也直接从成都回了学校，高二了，似乎也就她学生气息会那么像。小毅暑假在北京和西安游玩了大半个月，今天也要准备去开始新的旅程。也不知道高三毕业这么长的暑假，现在去学校会不会觉得别扭，不过大家也都是这么过来的，大学入学的考试，自己人生第一次考试中睡着，后来发现睡倒了班级的一大半人😂。不过新鲜感是真的会持续很久。 八月最后一天送老徐离别。不知不觉八月的人员变动似乎来的那么频繁。大概这样的结局可能想到过，也可能现实超出了自己预期。最近几天重去了中钢，傍晚依旧那么灯火辉煌，食宝街在对面也开张了，这个地方，吃了很多次饭，和这群人，离别是真的很不舍得。大概想念这种事情，过了这个年月变得越发模糊，看看凌晨一点的表，想起了去年五月份的会议室，那时候等待一个远方的消息，这些从来没有这么期待过，愿未来更好。 开学第一天，新学期会更好。 详情 »
查看详情
React-360 源码阅读【2】
接着前文 《React-360 源码阅读【1】》，下面主要分析构建这一部分业绩是 /scripts 目录下的内容； 结构 - build-packages.js - bump-versions.js - bundle.js - install-deps.js install-reps.js 在说这片代码之前，我们需要先去 packages/react-360-cli/src/getPackager.js 了解下如何判断是否支持 yarn。 const child_process = require('child_process'); let packager = null; function getPackager() { if (packager !== null) { return packager; } try { child_process.execSync( /^win/.test(process.platform) ? 'yarn 详情 »
查看详情
React-360 源码阅读 - 一张图带你理解 React-360 结构
终于开始准备连载这一系列，React-360 前身就是 React-VR。大概在 2.0.0 的时候还是使用 React-vr 来命名，但是随后重新开始了命名；因此安装的一些包的名称也有变化了。 比如我们在初始化的项目时候，需要安装 $ npm install -g react-360-cli 小插曲 为什么更名？ 2017 年 Facebook 发布了 JavaScript 框架 react-vr ，它是基于 JS 来实现用于在浏览器创建 VR 内容的框架。但是在同时， oculus 开始基于 C++ 开始编写 API ，因此为了避免两者出现一些困扰，我们重新命名了框架 react-360, 专注于创建 沉浸式的 VR 内容，同时支持 PC, 手机以及 VR 设备； 阅读之前 在具体阅读之前，建议了解下下面内容; React(https: 详情 »
解决 no "ssl_certificate" is defined nginx 配置问题
近期开始陆续把 https 证书往 EC2 上开始部署；由于 Chrome 67 版本对 https 的要求更高了，加上近期会实验 http2，所以不得不开始把 HTTPS 启用了；之前写过为什么没有启用 SSL 的原因，很大程度上是因为 vanthink.cn 的七牛图床没有开启 HTTPS 导致这边的前端静态资源一直没能够使用到 https ，但是随着近期图床的迁移，应该会在两三周内完成域名的全部迁移； 证书用的是 腾讯云 的免费的证书。按照官方教程来的，但是结果还是出错了。始终访问不到。如果你启动的时候 nginx 没有抛出错误的话，你可以优先去看 AWS 控制台的安全组: 一定要开启对应的端口； 第二个排查就是，你需要去看 nginx 的错误日志; 一般在 /usr/log/nginx/error.log 报了什么错误; 这个问题其实还是比较好解决的， 详见这里 server { listen 详情 »
查看详情
webpack 4 升级迁移
好久不看 webpack 已经从 3到4了，其实很早到今年2月份就开始发布 webpack 4 的 beta 版本； 每一次 webpack 的升级都还是建议阅读下 《webpack 4: released today! - Sean T. Larkin》。你需要明白，为什么 webpack又要迭代一个新的里程碑，以及带了什么新的特性； 这里简单总结下: Faster！！！ Webpack 在 bundle bundle 的时间会缩短至少 60 个点，最高可以到 98%; (我们似乎可以节省一些时间去这些事情) Mode 增加了新的属性，来支持 development 和 production 的区别，从而达到更好的优化效果； CommonsChunkPlugin 不将启用；取而代之的新的 API optimization.splitChunks; WebAssembly 的支持，现在默认支持 import export 详情 »
查看详情
Pinterest PWA 案例学习
大概这是之前看 The Cost Of JavaScript In 2018 中提到的以参考索引，其实里面很多点挺重要的，当然推荐大家阅读下全文 A Pinterest Progressive Web App Performance Case Study; 后面其实说几点自己印象非常深刻的点； 为什么做这次性能改造 其实很多时候做性能改造，都会面临这样的质疑，它不是对现有版本的任何功能性的迭代，而是从多个方面去提升一些所谓数据指标。因此很多 产品(🐩) 都会去质疑这一件事情，但是 Pinterest 这次改造给出了更为直接的数据，性能的优化与用户数据方面的正相关： 其中相比老版本，用户的停留时间和核心参与度都有非常大的提升；其中和广告相关的数据，也有非常显著的增加；不难理解，当用户用更短的时间触达到页面， 合理的设置 chunks 如果我们是做基于 vue 项目或者 React 的项目，我们可以参考下 Pinterest 的 JS Bundles; js vendor 包含一些第三方的库比如(React, Redux, React-Router) 等; 详情 »
查看详情
立秋
又立秋了，每年立秋总觉得应该写些什么，一是半年有余，而是暑气消散，接下里的日子也需要好生计划。 今年相比往年，北京的天，似乎热的让人穿越到长沙的气息；往往这个时候，一出门，就可以明显感觉到一股热气扑面而来；大概无论如何，午饭过后，还是会绕着新园区走上几圈，变化的，发现是人越来越少。关于“离”，自己写过很多话，江湖，似乎从来都不缺少这样的关键词；每每聚餐，几个人就会侃侃去年五月的夏天，一起熬过的夜，一起看过四点的北京，一起倒计时的红包雨，似乎这样的记忆什么时候都是抹不掉的。 每每到七月下旬，似乎就是暑假的日子。对于一个已经告别学生生活如此久的人，似乎这是一种奢侈。大概，温度与时间都在告诉自己，嗯，是的，这就是暑假的味道。上周去了次天津。大概这是一年半之余的头一次，给童鞋送书，然后顺便和几个老同事见了一面。最大的变化是空港的房价又涨了！！！当然看着终于起来的 SM 城市广场，还是让人觉得蛮吸引人的。大概应该后面还会去几次，去看看新的办公室以及新的人。 随着小游戏的 release ，大概也是时候说一声再见。世界杯确实是近几年来挑战最为特殊的项目，不过历尽千帆，好歹最后还是顺顺利利。似乎大家都能够安安静静的呼吸一次外面的空气。对于项目的思考和设计的思考真的还是足够缺乏，大概这是今年非常重要提升的事情。 详情 »
查看详情
解决微信小游戏排行榜 Android 模糊问题
最近用 Cocos Creator (cc) 开发微信小游戏。由于 微信小游戏存在 主域和子域的隔离； 主域，你的主要游戏场景，和一些交互按钮等内容； 子域，主要用于获取用户数据和排行榜的显示； 微信这样分开也是为了更好地保护用户数据，防止数据泄露。因此一定要合理的设计自己的主域和子域； 凡是设计从微信里获取数据的比如用户头像，游戏成绩等；一定需要在子域的canvas 完成绘制； 实际在完成排行榜的功能时候遇到了一点兼容性的问题，Android 的部分机型(自己这边全部复现)和 iOS 设备上存在画布模糊的问题: ios 的截图如下: 搜索了一下，发现没有多少人提出这样的问题，但是看别的游戏也存在同样的问题； 不过，灵机一动！！！ 如果前端接触 canvas 的话，才开始都会遇到一个问题，就是再 PC 上看着挺好的，但是在移移动端就模糊了，因为这里存在一个 设备上物理像素和设备独立像素(device-independent pixels (dips))的比例 因此你的 canvas 设置的像素要比实际多出一些比如会有: canvas.width = window.innerWidth * window. 详情 »