node-canvas 绘制文字,自定义字体,最新文档更新

发现网上很多人都在提供一个错误都思路,因为node-canvas已经更新了,所以自定义字体只需要如下写法
请注意,注册registerFont字体方法的位置,一定要在createCanvas之前


const { registerFont, createCanvas } = require('canvas')
registerFont('comicsans.ttf', { family: 'Comic Sans' })

const canvas = createCanvas(500, 500)
const ctx = canvas.getContext('2d')

ctx.font = '12px "Comic Sans"'
ctx.fillText('Everyone hates this font :(', 250, 10)

前端规范第一版

以下为前端规范第一版,大家有啥想法及时交流一起完善

HTML 基本规范 【强制】

  • 标签全部小写且闭合
  • 代码中的引号全部使用双引号(区别js)
  • 合理使用语义化html标签
  • 使用utf-8编码

css 基本规范 【强制】

  • pc端默认字号16px;
  • 使用外链css文件
  • html标签中不使用style样式
  • css文件中样式按块写,公共样式要提取,同一属性要合并,注释要清楚
  • 尽量不使用html标签选择器来声明样式
  • 样式的小图片使用sprite图片
  • h5页面使用rem适配,html的font-size:50px;

CSS选择器命名规范 【强制】

  • 类和id命名,一律小写,使用中杠连接
  • 类和id命名,尽量不缩写,除非一看就明白的单词
  • 不要轻易使用id

CSS书写顺序 【建议】

  • 位置属性(position, top, right, z-index, display, float等)
  • 大小(width, height, padding, margin)
  • 文字系列(font, line-height, letter-spacing, color- text-align等)
  • 背景(background, border等)
  • 其他(animation, transition等)

公共组件的css 【强制】

继续阅读前端规范第一版

微信小程序swiper之巨坑

今天突然发现自己的小程序出现问题,多页滑动到第二页有问题,出现空白,元素不展示,奇怪从来没动过呢,后来发现自己手机微信版本更新了 版本号为:7.08

是不是新版本导致swiper组件出现问题呢,特意找了一个代码片段,没问题,那就是自己代码的问题了!

把所有代码从头到尾删了个遍,最后发现是swiper-item 内定义了宽高所致,记录一下

最后亮出我的小程序,一起学习交流

 

微信小程序自定义组件编写指南之我见一

微信小程序自定义组件(以下组件特指自定义组件)在开发过程中有着不可替代的作用,在我看来,小程序的编写就是大部分工作量在组件的开发,在前期规划好组件功能,在小程序不断迭代会有非常好的编程体验

实际上,组件开发也体现出了前端在开发过程中封装的思想,这里就谈一下我在开发过程中的一些感悟,记录总结一下,供大家参考填坑

以下为文章导航,不一定按顺序写,有些文章也不一定会一次写完,有时间就写点补充,包括这里的目录也会修改补充,都会在这里列出来最新更新时间和链接,大家关注下吧

  • 先介绍一下组件的基本功能特性
    1. 写法规则,样式(8月23日更新)
    2. 通信规则
    3. 生命周期
    4. 组件之间关系
    5. 数据监听
    6. 单元测试
  • 什么时候我们应该使用组件
    1. 为什么要用组件 (8月23日更新)
    2. 什么时候要封装成组件
  • 新建组件规划
    1. 组件properties变量规划
    2. 组件私有数据规划
    3. 组件方法规划
    4. 组件通信事件规划
    5. 组件生命周期规划

组件模板和样式 

组件模板和样式

类似于页面,自定义组件拥有自己的 wxml 模板和 wxss 样式。

组件模板

组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树,将被插入到组件的引用位置上。

在组件模板中可以提供一个 <slot> 节点,用于承载组件引用时提供的子节点。

代码示例:

在开发者工具中预览效果

<!-- 组件模板 -->
<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <slot></slot>
</view>
<!-- 引用组件的页面模板 -->
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
    <view>这里是插入到组件slot中的内容</view>
  </component-tag-name>
</view>

注意,在模板中引用到的自定义组件及其对应的节点名需要在 json 文件中显式定义,否则会被当作一个无意义的节点。除此以外,节点名也可以被声明为抽象节点

模板数据绑定

与普通的 WXML 模板类似,可以使用数据绑定,这样就可以向子组件的属性传递动态数据。
继续阅读组件模板和样式 

破34亿!《哪吒》跻身前五

高兴由衷的 为中国的动漫事业

猫眼公布的最新实时数据显示,截止8月11日16时07分,动画电影《哪吒之魔童降世》(以下简称《哪吒》)累计票房达到34.50亿,排在中国电影票房总榜第5名。

数据显示,截止11日12时41分,《哪吒》累计票房达到33.99亿,已经超过前日第6名《美人鱼》的33.86亿元和第5名《唐人街探案2》的33.97亿元。其中有9393.5万人次观看,猫眼口碑评分高达9.7分。

在中国电影票房总榜上,截至8月10日的数据显示,《哪吒》还以33.39亿元排在第7位,但目前排到该榜单的第5名,并直指第4名《红海行动》的36.5亿元。

据此前报道,截至8日17时32分,该影片已连续13天获得单日票房冠军,累积突破30亿,跻身中国影史票房总榜前八名,并成为中国影史首部进入“30亿俱乐部”的动画电影。

据了解,《哪吒》从上映以来连续创造多项纪录,直到今天已经进入上映后的第17天,票房占比仍超过54%,排片占比高达37%,猫眼票房专业版对其总票房预测为47.17亿。

如何优雅重加载 Web 应用 

但凡在各种环境中,尤其是生产环境中部署过应用的,比如更新应用或者配置,就会了解到,应用的重启或者升级多少都会影响用户访问,那这种影响会到什么程度呢?

影响用户的重启

表面上看,轻则是页面不能正常加载,让用户以为是网络不好(事实上,这也经常成为服务器出问题的背锅原因,有的 APP 则直接在前端硬编码报错信息,所有的错误统一显示:网络出错了,请重试)。
重则影响用户的支付流程,导致用户放弃支付,更严重的则是用户支付过程中处理数据不当的话,就会丢失数据,导致对账失败。

而从本质上看,如果你在浏览器中调试的时候,这种错误会在调试窗口显示 net::ERR_CONNECTION_REFUSED,原因就是端口被释放了,这也就是告诉我们,重启过程中的一段时间里,由于后续程序无法快速建立监听,会导致 TCP 链接被短时间断开,端口监听也会被释放,导致数据包无法送达,正在使用中的连接也会被打断,就会导致这个现象。

所以,我们该如何解决?回过头看这个过程,我们就需要达到的目标无非就是用户无感知,那对于我们就有两种方案:一种是把这个责任交给现有的成熟负载均衡器,另一种是自己用操作系统提供的 API 自己实现自我升级。

自我升级方案

目前已经有多个社区的基础库可以帮助实现了,比如 Golang,我们至少有以下几个1

实际上,看源码后自己实现也可以,因为原理是一致的,升级的大致过程就是以下:

  1. 启动进程,运行 Web 服务,监听相关的端口;
  2. 接收到 Reload 命令,运行新程序,运行并等待服务可用;
  3. 新子程序出错时,直接报错,退出 Reload 步骤;
  4. 没有问题则继续,旧进程退出,新进程接管流量;

这种方案就是非常常见的方案,只是在这个过程中,同一时间只允许一个升级,不然就会出现问题。其实还有个方案,如果是针对自己无法修改的程序,可以参考 Github 为 HAProxy 开发的 multibinder2

负载均衡方案

这种方案是最简单的,因为负载均衡器可以接管流量,负责升级过程:当新进程准备完成时,把旧 Web 应用的流量切换到新 Web 应用,然后不断升级剩余的应用,这在 Kubernetes 或者 Docker Swarm 中叫做 Rolling Upgrade,这个过程会非常顺滑,可以达到让用户无感知。

另外,有的负载均衡器自己就实现了自我升级的,比如 Nginx,我们用 nginx -t reload 这个命令就能让 Nginx 重新加载配置,这个过程中,它就进行了自我升级。

而在 Node.js 中,有 pm2 提供给我们的 Graceful shutdown 方案,即通过进程内通信的方式,让我们能够在关闭时提前关闭数据库等连接,以及启动的时候等数据库连接等完成后再继续。这种方式可以让我们自己在 Cluster 模式中,进行应用的优雅升级,只是,它做得不够好(2.x 版本的时候):

  1. 升级过程中,不会判断新程序有没有准备完毕,一旦超时还是会继续升级,这在之前导致了非常多的线上问题;
  2. 升级无法控制速度,升级速度很快,于是我们可以看到监控画面上,过山车似的一上一下,这实际上是不好的,因为这就表示我们的重启影响到了部分用户;

新版本 (3.x) ,还没用过,但是看文档,它提供了 –parallel 这个参数,能让我们自己控制并行升级数量了,也就是能控制升级速度了,配合 Graceful shutdown 的功能,应该能够缓解。

但更好的方案的话,还是得用 Kubernetes 提供的 Rolling Upgrade 功能,这在我之前的实践中,可以观察到明显的对比,即新方案上了之后,每次升级监控上的响应时长波动会很小。

Ref

  1. Graceful upgrades in Go
  2. GLB part 2: HAProxy zero-downtime, zero-delay reloads with multibinder

首发于 Github issues: https://github.com/xizhibei/blog/issues/108 ,欢迎 Star 以及 Watch

本文采用 署名-非商业性使用-相同方式共享(BY-NC-SA)进行许可
作者:习之北 (@xizhibei)
原链接:https://blog.xizhibei.me/2019/06/03/how-to-graceful-reload-web-app/

Git 原理入门

Git 是最流行的版本管理工具,也是程序员的必备技能之一。

即使天天使用它,很多人也未必了解它的原理。Git 为什么可以管理版本?git addgit commit这些基本命令,到底在做什么,你说得清楚吗?

这篇文章用一个实例,解释 Git 的运行过程,帮助你理解 Git 的原理。
继续阅读Git 原理入门

Google 的后端工程师都开始写小程序了?反编译 “猜画小歌”看看

 

今天 Google 在微信发布了一款小程序“猜画小歌”,都已经刷爆朋友圈了。没想到谷歌重返中国第一个应用竟然是小程序,而且还是基于 AI 的小程序。还没体验的可以扫码体验一下。

逻辑很简单,每局给你一个新的词,让你画对应的图案,我感觉应该是将你画的图,向提供的关键词去靠拢,很多其实沾一点边的图,都能识别上,产生了很多灵魂画师。我今天体验了一下发现根本停不下来,根本停不下来,忍不住在群里分享一波。

反编译小程序

在知乎上已经有人将“猜画小歌”反编译出来,发现目录结构特别具有 Java 工程师的风格,非官方消息也说到,是一名后端开发工程师自己独立完成的小程序开发任务。

感受一下目录风格:

反编译者还发现很多命名方式都是中英文混编以及命名规范不一致,还专门吐槽了一下。

还发现了例如一些引入第三方库不规范的例子,例如引入了 cryptojs 来作为接口加密,但是其实只用到了 SHA1 加解密。

知乎用户 @Kumakuma 还爆料称,此小程序就是后端工程师写前端,并且是一个人完成的,不过因为时间紧任务重,很多地方都不规范,后期应该会加强代码审核,也就不会出现这样的问题了。

“猜画小歌”隐藏功能

在反编译的文章中,还发现了很有意思的点,其实它还隐藏了很多有意思的功能,光小程序的页面竟然就有 14 个。

能看出来,确实有很多隐藏的页面,从反编译的效果来看,最少会有对战页面、注册码页面、打赏功能等等。

按现在的热度和传播效果来看,这个游戏的方向算是正确的,后续应该还会增加一些多人互动方向的新玩法,很值得期待。

灵魂画师会带坏 AI?

就如前面说的,“猜画小歌”就是一款 AI 小程序,它的匹配规则还是很宽泛的,所以很多灵魂画手就上线了,基本上靠一点边“画作”就可以被识别出来。

但是不必要担心,上线之前 AI 本身就已经提前喂了大量的数据给模型,所以现在这点用户量,并不会对 AI 的模型有任何冲击。

不排除之后用户量暴涨之后,会对模型造成冲击,不过话说回来,如果是中国人自己教的 AI,是不是更适合中国人的画风呢?

我想,自己教的孩子,自己一定喜欢。

“猜画小歌”的意义

本身 Google 志不在游戏,更多的应该是想通过游戏的形式,让大家了解 AI,毕竟 Google I/O 已经是 AI First 了。

我想 AI 发展到最后,基础设施会越来越完善,准入门槛会越来越低,发展到最后肯定就是拼创意、想法和数据。

AI 没有那么神奇,也没有那么智障,更多的是可以做到一些传统代码做不到的事情,可以解放很多工作,非常值得期待。