TAT.yana fis3 初步学习体验
In Web开发,资源工具 on 2016年01月05日 by view: 10,892
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 插件名 进行安装。

起源

众所周知,js 是一门弱类型的语言,类型转换往往隐含在各种业务代码中,同时也埋下了不少的坑。比如以下代码


一、概念解析:

Mongoose:

Let's face it, writing MongoDB validation, casting and business logic boilerplate is a drag. That's why we wrote Mongoose.

Mongoose 简单来说就是数据库操作 ORM

createConnection 与 connect:

许多入门学徒在看到这两个函数的时候都会有一定疑惑,但是这两个函数其实并不是一个东西,

createConnection 创建的并非一个默认的数据库连接,它返回的是一个 Connection。我们需要通过这个 Connection 来创建 Model、Instance,然后进行数据表操作,这通常是在程序需要连接多个数据库的情况下使用,否则一般使用 connect 来打开默认的数据库连接,这时候我们就可以用 mongoose.model 来创建我们的 Model 了。

前言

随着 Web 前端开发由 PC 转向 Mobile,作为前端工程师,除了需要去学习掌握移动端的新特性外,还需要面对大量移动端特有的难题,其中之一就是——怎么调试移动端页面? 针对调试的问题,现在已经有一些很好的解决方案,比如:weinre、chrome remote、手 Q 浏览器 Inspector,不过这些方案的门槛都较高,需要满足一些额外的条件。目前,在日常的开发调试工作中,打日志依然是一种常见的调试手段,通过日志内容来判断当前页面运行的状态,而日志的输出形式又有很多种,有 img 请求、dialog 弹窗、alert 等等,但这些输出方式都不能很好的满足我们的需要,甚至存在一些问题,所以 Rosin 诞生了。

关于 Rosin

Rosin 是一个 Fiddler 插件,它能接收页面中的 console 的输出,将内容持久存储在本地,并展现在 Fiddler 面板。 如果你的项目是通过 Fiddler 代理来开发调试手机页面,那么 Rosin 将会是你的好帮手。
项目地址:  http://alloyteam.github.io/Rosin/

快速入口

不读文章可以直接拐向这里:

spritecow 二代:https://kmdjs.github.io/arejs-tool-sprite/

写在前面

工欲善其事必先利其器,最近 fork 了一份 spritecow 代码进行了大量升级改造,
作为 AlloyRenderingEngine 的开发辅助工具之一,确确实实地提高了开发效率,游戏或前端开发更加便利。

写在前面

大家阅读此文之前,可以先看一篇 MiloYip 的文章:用 JavaScript 玩转游戏物理 (一) 运动学模拟与粒子系统,看完之后再看此文,更加容易理解。

MiloYip 使用的粒子是 canvas 中绘制的圆,还有一些粒子效果是基于 像素级别的,如:火焰字 ,但是使用像素的计算成本太大,因为需要的粒子数量太多,甚至要配合一些 nosie 算法,如(perlin nosie),计算量太大。

所以一般会先设计好粒子的纹理(每个纹理假设是 32*32,一个粒子就包含了九百多个像素了),这样需要的粒子个数不多,计算量也不大,管理粒子的成本也不高(对粒子增删改查)。

canvas globalCompositeOperation

粒子系统在什么时候最漂亮?晚上!所以在绘制纹理的时候,需要设置 globalCompositeOperation 的值为 lighter。其作用是:在图形重叠的地方,颜色由两种颜色值的加值来决定。

globalCompositeOperation 还有非常多的属性可以设置,详情见:w3school。

TAT.yunsheng 【译】EditorConfig 介绍
In Web开发,资源工具 on 2014年12月14日 by view: 30,777
0

前言

EditorConfig 是一套用于统一代码格式的解决方案,很多项目都有用到,比如 BootstrapjQueryUnderscoreRuby 等等。官方网站说的很简明,为了方便大家快速上手,我做了简单的翻译。

EditorConfig 是什么?

EditorConfig 可以帮助开发者在不同的编辑器和 IDE 之间定义和维护一致的代码风格。EditorConfig 包含一个用于定义代码格式的文件和一批编辑器插件,这些插件可以让编辑器读取配置文件并依此格式化代码。EditorConfig 的配置文件十分易读,并且可以很好的在 VCS(Version Control System)下工作。

EditorConfig 的配置文件是怎样的?

LivePool

LivePool 是一个基于 NodeJS,类似 Fiddler 能够支持抓包和本地替换的 Web 开发调试工具,是 Tencent AlloyTeam 在开发实践过程总结出的一套的便捷的 WorkFlow 以及调试方案。

如果你在 3 月 23 日左右升级了 compass,你可能会遇到这样的错误:

sass - 3.2.18
compass - 0.12.4
 所以目前的处理方法就是安装原来的版本

gem uninstall compass
gem uninstall sass
gem install sass --version "3.2.10"
gem install compass --version "0.12.2"
这样就可以消除上述错误了。

AlloyDesigner 介绍

  AlloyDesigner 的创意来自于 “临摹” 的灵感,使用 AlloyDesigner 后,你可以把设计稿拖进你的 Web 页面铺在页面的最底层,然后就可以对着设计稿来构建 DOM 元素和 CSS 样式啦,这样子是不是直观了很多?通过 AlloyDesigner 直观地调整页面,迅速达到与视觉稿一致的目的。

AlloyDesigner 的官网:http://alloyteam.github.io/AlloyDesigner/

 

alloydesigner5