公子 发布于 12月30, 2019

使用 pkg 打包 ThinkJS 项目

在 ThinkJS 的用户群里,经常有开发者提出需要对源码进行加密保护的需求。我们知道 JavaScript 是一门动态语言,不像其他静态语言可以编译成二进制包防止源码泄露。所以就出现了 [pkg][1]、[nexe][2] 之类的工具,支持将 JS 代码连同 Node 一块打包成一个可执行文件,一来解决了环境依赖的问题,二来解决了大家关心的源码保护的问题。

在 [pkg][3] 模块的 README 中,罗列了它的几大用处,如果你有下面的几个需求的话建议不妨试试。

  • 为应用提供商业发行版而不用暴露源码
  • 为应用提供 demo 而不用暴露源码
  • 一键打包所有平台可执行文件而不需要对应平台环境依赖
  • 提供自解压或自安装的解决方案
  • 运行应用不需要安装 Node.js 和 npm
  • 部署仅需要一份单文件,不需要通过 npm 安装大量的依赖
  • 资源打包后让应用迁移起来更加方便
  • 在指定 Node.js 版本下对应用进行测试而不需要安装对应的版本

阅读全文 »

公子 发布于 12月25, 2019

使用 React 为 Chimee 开发插件

[Chimee][1] 是由奇舞团开源的一套可扩展的H5组件化播放器框架。由于前段时间业务有视频播放的需求所以使用了它,并基于它提供的插件系统之上开发了一系列的插件,其中最复杂的是控制条插件。由于默认的样式无(实)法(在)满(是)足(太)设(难)计(看)需(了)求(!),所以我们重新开发了一套 [lizheing/chimee-plugin-controlbar][2] 并总结一些心得,希望对大家有帮助。

阅读全文 »

公子 发布于 12月02, 2019

如何将你的 ThinkJS 项目部署到 ZEIT 上

什么是 ZEIT

ZEIT 是免费的云平台,支持部署静态网站以及 Serverless 函数。Serverless 是近几年比较火的概念,简单去理解就是你只需要去实现具体的业务逻辑,而与最终服务相关的服务器、HTTP 服务等则由第三方管理。Serverless 又被称为 FaaS(函数即服务),由于业务粒度非常细,所以非常方便做动态扩容等自动化运维任务。

//一个最简单的基于 Node.js 的 Serverless 函数
module.exports = function(req, res) {
  const { name = 'World' } = req.query
  res.send(`Hello ${name}!`)
}

通过 ZEIT 提供的 CLI 工具 now,我们可以一条命令将 Node.js, Golang, Python, Ruby, PHP, Rust 等语言的应用部署到 ZEIT 上。如果你想了解更多关于 ZEIT 这个公司的知识也可以看这篇知乎回答了解更多。

阅读全文 »

公子 发布于 11月30, 2019

使用 Hooks 优化 React 组件

需求描述

由于我所在的业务是资讯内容类业务,因而在业务中会经常碰到如下场景:有一个内容列表,列表中需要按照一定的规则插入广告。除了获取广告数据,广告展现和点击后需要有打点上报逻辑。正常来说我们会这么写:

阅读全文 »

公子 发布于 10月09, 2019

使用 SVG 实现圆环日期选择器

前言

这篇文章是多年前在 SegmentFault 上的一个回答,原问题是问如何使用 Canvas 实现一个下图类似的圆环选择器,点击后会出现对应的日期。虽然已经有 Canvas 的答案了,不过当时正好在学习 SVG 就顺手自己实现了一下。我感觉对大家去理解 SVG 的贝塞尔曲线会有一定的帮助,所以重新整理了下发出来。另外感兴趣的同学还可以去原问题上看一下,除了标准答案 Canvas 的实现以及我写的 SVG 实现之外,还有使用 DIV+CSS 的实现方案。

阅读全文 »

公子 发布于 10月07, 2019

TTML—让 W3C 获得艾美奖的字幕规范

logo

说到视频字幕格式,一般大家都会想到 .srt, .ass 之类大家比较常用的格式。而现在说到 Web 字幕格式,大家第一反应肯定都是 [WebVTT][1]。我们知道在<video>或者<audio> 标签中要加载字幕的话,需要使用 <track> 标签将字幕文件嵌入进来。而在 [track][2] 的文档中我们会发现其实还有一种 Web 字幕格式,那就是本文的主角 TTML。

The tracks are formatted in [WebVTT format][3] (.vtt files) — Web Video Text Tracks or [Timed Text Markup Language][4] (TTML).
via: [<track>: The Embed Text Track element][5]

阅读全文 »

公子 发布于 09月12, 2018

75CDN 增加 ES Module 支持

75CDN 是一个由奇舞团维护的静态资源托管平台,创立至今已经稳定运行了两年多的时间。近期我们增加了 ES Module 的支持,成为国内首个拥抱 ES Module 服务的静态资源库。

ES Module 是 ES6 中提出的规范,用于让 JavaScript 实现 import 导入模块的功能。其又细分为静态 import 和动态 import 两个特性,目前浏览器的支持情况如下:

浏览器 静态 import 动态 import
Chrome 61+ 63+
Chrome For Android 67+ 67+
Firefox 60+ 不支持
Firefox For Android 60+ 不支持
Safari 10.1+ 11.1+
iOS Safari 10.3 11.2+
Edge 16+ 不支持

注: 数据来源于 [CanIUse][1]

阅读全文 »

hxl 发布于 07月23, 2018

你一定是闲得蛋疼才重构的吧

随着“发布”进度条走到100%,重构的代码终于上线了。我露出了老母亲般的围笑……

最近看了一篇文章,叫《史上最烂的开发项目长啥样:苦撑12年,600多万行代码》,讲的是法国的一个软件项目,因为各种奇葩的原因,导致代码质量惨不忍睹,项目多年无法交付,最终还有公司领导入狱。里面有一些细节让人哭笑不得:一个右键响应事件需要花45分钟;读取700MB的数据,需要花7天时间。足见这个软件的性能有多糟心。

如果让笔者来接手这“坨”代码,内心早就飘过无数个敏感词。其实,笔者自己也维护着一套陈酿了将近7年的代码,随着后辈的添油加醋……哦不,添砖加瓦,功能逻辑日益复杂,代码也变得臃肿,维护起来步履维艰,性能也不尽如人意。终于有一天,我听见了内心的魔鬼在呼唤:“重构吧~~”

重构是一件磨人的事情,轻易使不得。好在兄弟们齐心协力,各方资源也配合到位。我们小步迭代了大半年,最后一鼓作气,终于完成了。今天跟大家分享一下这次重构的经验和收益。

挑战

此次重构的对象是一个大型单页应用。它实现了云端文件管理功能,共有10个路由页面,涉及文件上传、音视频播放、图片预览、套餐购买等几十个功能。前端使用QWrap、jQuery、RequireJS搭建,HTML使用PHP模板引擎Smarty编写。

阅读全文 »

hxl 发布于 06月12, 2018

同学,W3C了解一下?

虚拟人物A:“同学,W3C了解一下?”

我:“嗷,是那个Web标准化组织吗?这个组织里的人每天都做什么?平时写不写bug呀?”

你第一次看到W3C这个词的时候,内心是不是秒演上面这段戏?别慌,我们都一样~

直到4月份一个瘦瘦高高的小哥哥来访我数字公司,我才了解这个“神秘”的组织。这个小哥哥叫薛富侨,是W3C中国的北航总部团队成员。他的演讲解答了我心中的很多疑惑,并激发了我加入W3C工作组的兴趣。一周前小编加入Web性能工作组。想了解小编如何参加W3C工作组可以直接跳到最后一节查看~

阅读全文 »

公子 发布于 06月03, 2018

Animaris SVG LOGO 动画设计

前段时间我开源了一个叫 [Animaris][1] 的项目,这个项目是使用 ThinkJS + MongoDB + React + Antd 开发的移动端 WebView 接口文档系统。平常大家见到的接口文档无非就是 HTTP API 接口文档,要么就是框架/库提供的接口方法文档。对于这种 WebView 的接口提供文档基本上没有。借着业务的需求我做了这么一个项目,用来解决以下两个问题:

  1. 移动端接口编写并生成可视化文档
  2. 移动端接口前端开发环境模拟问题

如果有相关需求的同学也欢迎使用,感兴趣的同学也欢迎 [star][2]。咳咳,回到本文的重点,项目开发的差不多的时候我就准备给它设计一款 LOGO 了,以下是成品效果图。虽然我没有学过绘画没有很好的设计功底,但是我相信简单的形状也能发挥不错的效果,那么我就给大家讲讲我是如何设计这款 LOGO 的。

animaris

阅读全文 »