前言

自从小程序自定义组件和 npm 功能面世之后,组件化和开源思想逐步开始萌芽了。我们可以将一些通用的部件,如自定义导航栏之类的封装到一个自定义组件中,然后借由 npm 平台开源出去给其他开发者使用,这样可以省去很多劳动。相信各位开发老爷们应该或多或少都有过使用开源包的经历,但是在使用前,这个开源包得能赢取我们的信任,一个很重要的指标就是单元测试通过率和覆盖率。

但是因为小程序独特的运行环境和不完全开源的基础款,使得对小程序自定义组件的单元测试稍微有点困难。目前市面上无论是 vue 还是 react,这些组件化框架都有一套完善的单元测试解决方案,但是对于小程序自定义组件来说却寥寥无几,因此这个工具集—— miniprogram-simulate 便应运而生了。

TAT.dnt Omi 拥抱 60FPS 的 Web 动画
In 未分类 on 2018年11月07日 by view: 3,458
0

写在前面

Omi 框架 正式发布了 → omi-transform

Made css3 transform super easy. Made 60 FPS easy.

作为 Omi 组件化开发特效运动解决方案,让你轻松在 Omi 项目里快速简便支持 CSS3 Transform 设置。css3transform 是经受过海量项目洗礼的,作为移动 Web 特效解决方案,在微信、手 Q 兴趣部落、日迹、QQ 群、QQ 附近等项目中广泛使用,以激进的修改 DOM 属性为代价,带来极为便利的可编程性。

你可以通过 css3transform 官方首页快速了解它。

TAT.joeyguo 多个动画间存在部分相同动画的优化方案:gka
In 未分类 on 2018年04月29日 by view: 1,692
0

原文地址

gka-animation

“抓娃娃” 并不陌生,存在两种结果: 抓到与抓不到。在 Web 动画中,如上图,“抓到” 与 “抓不到” 对应着两个动画,可以使用不同的动画图片资源来实现,似乎毫无异义。

细做观察,不难发现:两个动画中 “动画初始到抓取” 及 “抓取结束到动画结束” 的区间中存在相同动画 (滑动和晃动抓杆)。既然动画相同,那么可以通过引用同一份动画图片资源,不做相同图片的重复加载,从而减少总资源大小。

“两个动画间存在部分相同的动画,相同部分可以引用同一份动画图片资源,来减少图片的总大小。”

肉眼进行辨别哪些动画是一样的?那是不可能的。gka 提供一键式制作多个动画的方式,支持多种图片优化方案 (含图片去重)。

gka 是一款简单的、高效的帧动画生成工具,图片处理工具。

官方文档:https://gka.js.org

Github:https://github.com/gkajs/gka

TAT.joeyguo 快速制作多倍图帧动画方式及原理:gka[–ratio]
In 未分类 on 2018年04月25日 by view: 1,501
0

原文地址

gka

多倍图的适配在前端开发还是比较常见的,像在 Retina 屏幕,一般会使用二倍图从而让图片保持清晰,而在开发帧动画中使用的图片实际上同样需要做这样的适配处理。gka 提供一键式的制作多倍图帧动画的方式。

gka 是一款简单的、高效的帧动画生成工具,图片处理工具。

官方文档:https://gka.js.org

Github:https://github.com/gkajs/gka

TAT.joeyguo 使用 gka 一键生成帧动画
In 未分类 on 2017年07月09日 by view: 6,449
4

gka

简单的、高效的帧动画生成工具


gka

gka 是一款简单的、高效的帧动画生成工具。

通过对图片集进行处理,一键式生成序列帧动画文件,并内置相关优化。

  • 一键式 : 图片文件批量序列化重命名,生成 css keyframes,生成帧动画预览文件
  • 性能佳 : 支持图片压缩✓,支持合图模式✓,相同帧图片复用
  • 多模板 : 内置多种文件输出模板,支持自定义模板

最新更新,请访问 github 地址 https://github.com/joeyguo/gka

TAT.dnt Omi 应用 md2site-0.5.0 发布-支持动态 markdown 拉取解析
In 未分类 on 2017年03月15日 by view: 1,141
2

写在前面

Md2site 是基于 Omi 的一款 Markdown 转网站工具,使用简单,生成的文件轻巧,功能强大。

在使用之前的版本的时候,你会发现体验非常好?为什么非常好?因为页面间的切换是无刷新!
无刷新的原理就是,所有的 markdown 都会被 webpack 打包到 js 里,只要在 js 动态 require 就行。

这样带来的一个问题便是:如果有海量的 markdown 的时候,首次加载的时间非常长。

怎么解决?支持动态拉取和解析 markdown~~

TAT.dnt Omi 命令行界面 omi-cli 发布
In 未分类 on 2017年03月09日 by view: 1,851
1

原文链接:https://github.com/AlloyTeam/omi/blob/master/docs/deep_in/cn_omi-cli.md

写在前面

通常认为,命令行界面(CLI)没有图形用户界面(GUI)那么方便用户操作。但是 CLI 比 GUI 节约资源,在熟悉命令之后,CLI 会比 GUI 更加高效地帮你完成想要的任务。

Omi CLI 地址: omi-cli

下面来介绍下 pasturn 童鞋为 Omi 开发的 CLI 的两种使用姿势:

姿势一

TAT.dnt Omi 应用 md2site 发布-markdown 转网站利器
In 未分类 on 2017年03月06日 by view: 2,449
5

写在前面

Md2site 是基于 Omi 的一款 Markdown 转网站工具,使用简单,生成的文件轻巧,功能强大。
当我们想把一堆 markdown 文档转成网站时,你可能有许多选择,倘若选择 md2site ,你一定会爱上她。

特性

  • 超轻巧,生成的网站除了 Omi 不依赖其他第三方库,超级小的尺寸让你加载更快
  • 完整支持 Markdown,使用 markdown 写你的文档或者网站,完整支持 markdown 所有语法
  • 响应式,生成的网站是响应式的,手机和 PC 都有不错的阅读体验
  • 多语言,天生支持多语言,只需增加修改配置便可。让世界了解你的网站
  • 代码美,请记住: 不仅仅是代码高亮,使用 md2site 轻松可以让代码内的某些代码高亮
  • 超方便,npm run dev 预览,npm run dist 一键生成网站。不满足现有布局或样式可轻松进行二次开发
TAT.dnt 2017 年试试 Web 组件化框架 Omi
In 未分类 on 2017年02月08日 by view: 9,509
14

Omi

Open and modern framework for building user interfaces.


  • Omi 的 Github 地址 https://github.com/AlloyTeam/omi
  • 如果想体验一下 Omi 框架,可以访问 Omi Playground
  • 如果想使用 Omi 框架或者开发完善 Omi 框架,可以访问 Omi 使用文档
  • 如果你想获得更佳的阅读体验,可以访问 Docs Website
  • 如果你懒得搭建项目脚手架,可以试试 omi-cli
  • 如果你有 Omi 相关的问题可以 New issue
  • 如果想更加方便的交流关于 Omi 的一切可以加入 QQ 的 Omi 交流群 (256426170)
TAT.yana fis3 初步学习体验
In 未分类 on 2016年01月05日 by view: 7,462
17

作为前端开发,或多或少都会接触很多前端构建工具,最近的业务使用到了百度 FIS 团队的 fis3,想和大家分享下我所理解的 fis3。

 

使用方法简单说

首先,你需要安装 node 和 npm

然后,使用 npm install -g fis3  命令安装 fis3,安装完成是这样的

图片1表示安装成功。

然后我们可以通过 fis3 release -w 来对代码进行监听。

注:fis3 默认内置了 fis3-command-release 插件,提供了文件监听和浏览器自动刷新功能,在 release 的时候添加-w 或-L 参数就可以,这样可以很方便的部署代码。

当你需要使用插件的时候,可以用 fis3 install -g 插件名 进行安装。