TAT.joeyguo 如何开发一个 Webpack Loader ( 一 )
In 未分类 on 2016年01月13日 by view: 10,879
5

原文地址

 

 

webpack

最近,项目用了 React,配套使用了 Webpack,毕竟热替换(react-hot-loader)吸引力确实高,开发模式下使用 webpack 构建其实也够用,并且相对 gulp-webpack 来说,模块的编译等待时间大大缩小,这是生命啊! 发布时,借助 gulp 来进行其他方面的处理,如合图,打包等。或许把这些边幅修一修、支持下,Webpack 估计就要逆天了吧?

 

我就是要用CSS实现
In 未分类 on 2016年01月13日 by view: 21,551
45

写在最前

我们都是前端工程师,无论你现在是页面仔,还是Node服务开发者,抑或是全端大神,毋庸置疑的是,我们都是前端工程师,我们生来就对追求页面的极致拥有敏锐的触觉,无论是页面实现方式的高大上、页面的极致的性能还是页面完美的展现,都是我们孜孜不倦的追求目标。即使这些在别人眼里,只是跟其他的页面一样没什么不同,但我们却能为其中那只有我们才知道的一抹别致而窃喜。

而今天我要讲的,就是我们最熟悉的老朋友,CSS。不讲枯燥的语法,抛开js,让我们一起来看业务中那别致的纯CSS实现,让我们一起来追求那更好的页面实现,希望我带着你走完这段旅程后,你能收获一些惊喜甚至灵感。

TAT.老教授 研究首屏时间?你先要知道这几点细节
In 未分类 on 2016年01月09日 by view: 19,456
15

做移动web页面,受移动网络网速和终端性能影响,我们经常要关注首屏内容展示时间(以下简称首屏时间)这个指标,它衡量着我们的页面是否能在用户耐心消磨完之前展示出来,很大程度影响着用户的使用满意度。

 

怎么获取首屏时间呢?

我们经常要先问自己:页面是怎么加载数据?

A:加载完静态资源后通过ajax请求去后台获取数据,数据回来后渲染内容

QQ截图20160109164815

Service Worker初体验
In 未分类 on 2016年01月06日 by view: 13,983
8

在2014年,W3C公布了service worker的草案,service worker提供了很多新的能力,使得web app拥有与native app相同的离线体验、消息推送体验。
service worker是一段脚本,与web worker一样,也是在后台运行。作为一个独立的线程,运行环境与普通脚本不同,所以不能直接参与web交互行为。native app可以做到离线使用、消息推送、后台自动更新,service worker的出现是正是为了使得web app也可以具有类似的能力。

TAT.simplehuang 实例CSS3开场动画的制作与优化
In 未分类 on 2016年01月05日 by view: 4,709
7
TAT.yana fis3初步学习体验
In 未分类 on 2016年01月05日 by view: 7,248
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 插件名 进行安装。

TAT.joeyguo < AC 2015 > AlloyTeam 前端技术大会精彩回顾
In 未分类 on 2015年12月28日 by view: 4,012
12

AC2015-1024x559-tiny

        2015.12.12 由 AlloyTeam 团队发起的 <AC2015> AlloyTeam 前端技术大会,在腾讯大厦 2 楼多功能厅成功举办。 AlloyTeam 团队希望将团队在业务项目、工具和开源项目中的技术积累,借助 AC 大会 的平台将每一年的收获分享给业界同仁。

TAT.vorshen websocket探索其与语音、图片的能力
In 未分类 on 2015年12月25日 by view: 8,058
10

说到websocket想比大家不会陌生,如果陌生的话也没关系,一句话概括

“WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信”

WebSocket相比较传统那些服务器推技术简直好了太多,我们可以挥手向comet和长轮询这些技术说拜拜啦,庆幸我们生活在拥有HTML5的时代~

这篇文章我们将分三部分探索websocket

首先是websocket的常见使用,其次是完全自己打造服务器端websocket,最终是重点介绍利用websocket制作的两个demo,传输图片和在线语音聊天室,let's go

TAT.sheran Web Animation API 从入门到上座
In 未分类 on 2015年12月22日 by view: 6,198
12

 一、远观:认识WAAPI

当我们谈及网页动画时,自然联想到的是CSS3动画、JS动画、SVG动画、APNG动画等技术以及jQuery.animate()等动画封装库,根据实际动画内容设计去选择不同的实现方式。然而,每个现行的动画技术都存在一定的缺点,如CSS3动画必须通过JS去获取动态改变的值,setInterval的时间往往是不精确的而且还会卡顿,APNG动画会带来文件体积较大的困扰,引入额外的动画封装库也并非对性能敏感的业务适用。目前情形对开发者而言,鱼和熊掌似乎不可兼得,既希望获得更强大便捷的动画控制能力,又希望性能和体验上足够流畅优雅,如果能有一种浏览器原生支持的通用的动画解决方案,那将是极好极好的呢。

Hey async, await me
In 未分类 on 2015年12月18日 by view: 6,050
5

背景

笔者在前面的文章介绍过如何使用generator来解决callback hell,尽管现在多数浏览器特别是移动端浏览器还不支持该ES2015新特性,但你可以通过Babel等转换工具转化成ES5兼容的等效代码,从而在生产环境使用。

不过使用generator来解决callback hell似乎有点不务正业,毕竟generator是生成器,属于Iterator的一种,设计之初是用来生成一种特殊的迭代器的。

另外还有两点也可以算是generator解决callback hell问题的缺陷:

  1. generator需要从generator function执行得到,而generator function执行之后只会返回一个generator,不管里面是怎样的代码,与我们通常对函数的认知存在差异
  2. 如果想执行generator function的函数体,需要不断调用返回的generator的next方法,这样就决定了必须依赖cobluebird.coroutine等其他辅助代码或者手动执行next,来保证generator不断next下去

Tips:文章ES6 Generator介绍有介绍generator和generator function,以及它们之间的关系和区别。