公子 发布于 11月15, 2017

ThinkJS 3.0 如何实现对 TypeScript 的支持

ThinkJS 3.0 是一款面向未来开发的 Node.js 框架,内核基于 Koa 2.0。 3.0 相比 2.0 版本进行了模块化改造,使得内核本身只包含了最少量必须的代码,甚至还不足以构成一个完整的 Web MVC 框架,除了内核里面实现的 Controller, View 和 Model 被实现为扩展(Extend)模块 think-viewthink-model,这样实现的好处也是显而易见的,如果我的 Web 服务只是简单的 RESTful API,就不需要引入 View 层,让代码保持轻快。

think-cli 2.0 新版发布

在本文发布的同时 ThinkJS 团队发布了新版的脚手架 think-cli 2.0,新版脚手架最大的特点是脚手架和模板分离,可以在不修改脚手架的基础上添加各种项目启动模板,如果老司机想跳过下面实现细节,快速开始尝试 TypeScript 下的 ThinkJS 3.0, 可以用 think-cli 2.0 和 TypeScript 的官方模板:

npm install -g thinkjs-cli@2
thinkjs new project-name typescript

阅读全文 »

公子 发布于 11月14, 2017

75CDN 增加 SRI 支持

[75CDN][75cdn] 是一个由奇舞团维护的静态资源托管平台,创立至今已经稳定运行了一年多的时间。近期我们增加了 SRI 的支持,作为国内首个提供 SRI 服务的静态资源库了,也算是为 [75CDN][75cdn] 一周年庆生吧。

SRI 全称是 Subresource Integrity,是用来解决由于 CDN 资源被污染而导致的 XSS 漏洞的方案。当浏览器检测加载脚本签名与给定的签名不一致时,会拒绝执行该脚本。目前浏览器的支持情况如下:

浏览器 支持版本
Chrome 以及 Chrome for Android 45+
Firefox 以及 Firefox Mobile 43+
Safari 以及 iOS Safari 11+
IE 以及 Edge 不支持
UC 浏览器 不支持

注: 数据来源于 [CanIUse][caniuse] 和 [MDN][mdn]

阅读全文 »

公子 发布于 06月18, 2017

SVG动画实践

原文:https://imnerd.org/svg-animation-in-action.html

SVG 是基于 XML 的矢量图形描述语言,可以近似理解成 HTML,所以能和 JS 以及 CSS 进行交互。 特别是 CSS,配合 CSS Animation 就能实现一些令人心旷神怡的动画,这实在是让人兴奋。下面我们就来看看 SVG 配合 CSS 实现动画的一些方法。

本文内容主要是我之前分享的文字版,若想看重点的话可以看之前的 Slide:

也可以查看分享视频:http://cloud.live.360vcloud.net/theater/play?roomid=2079

阅读全文 »

akira_cn 发布于 03月08, 2017

使用 webpack2 和 NPM Scripts 进行 JavaScript 组件开发

原文:https://www.h5jun.com/post/using-webpack2-and-npm-scripts.html

最近 webpack 成为非常流行的打包工具,很多项目都在使用它。在我们进行 JavaScript 独立组件开发的时候,如果我们想要使用语言新特性,又想发布的时候产出兼容性好的代码,那么使用 webpack 就能够很大程度上帮助我们实现这一目标。

现在让我们来看看究竟该怎么做吧。

阅读全文 »

akira_cn 发布于 03月07, 2017

用60行代码实现JavaScript动画序列播放

原文:https://www.h5jun.com/post/sixty-lines-of-code-animation.html

最近在给学生上课,上周六的第一堂课是关于 JavaScript 动画的内容,其中包括一些简单的动画,比如匀速或者匀加/减速的运动,也包括复杂一些的组合动画。而动画的基本原理,在我之前的文章已经有了详细的介绍。在这里,我想谈一谈的是,我们可以如何针对现代浏览器设计更加简单的 API,来实现动画的序列播放。

阅读全文 »

akira_cn 发布于 02月23, 2017

轻松管理你的 Node 版本

原文:https://www.h5jun.com/post/manage_node_with_n.html

玩 Node.js 的小伙伴们都知道,现在 Node 的版本更新很快,目前最新稳定版已经更新到 v7.6.0 了,而生产环境一般选择使用 LTS(Long-term Support)版本,目前最新的是 v6.10.0。

新版的 Node 7.x.x 有非常有用的更新,那就是支持了 --harmony-async-await。这样就不用依赖 babel 来使用 async/await 特性了。

但是,如何让 7.x.x 和 LTS 的 6.x.x 并存呢?就需要用 Node 版本管理工具了。

阅读全文 »

akira_cn 发布于 01月17, 2017

5分钟现场撸代码——谈总结会抽奖程序

原文:https://www.h5jun.com/post/luckey-draw-in-5-minutes.html

昨天给奇舞团小伙伴们开年度总结会。JK大大为我们捐了10个小水滴摄像机,在开会前5分钟,裕波临时说要写一个抽奖程序,现场抽10名中奖的小伙伴,于是这个抽奖任务就理(莫)所(名)当(其)然(妙)地落到了我这个团长的头上。

闲话少说,那么如何在开会前现场写一个抽奖程序,满足这一要求呢?

阅读全文 »