前端外刊评论

关注前端前沿技术,探寻业界深邃思想

HTML5 手势检测原理和实现

关于作者 周林,github,陆金所前端程序员,专注 Hybrid APP 性能优化和新技术探索。欢迎任何形式的提问和讨论。 前言 随着 Hybrid 应用的丰富,HTML5 工程师们已经不满足于把桌面端体验简单移植到移动端,他们觊觎移动原生应用人性化的操作体验,特别是原生应用与生俱来的丰富的手势系统。HTML5 没有提供开箱即用的手势系统,但是提供了更底层一些的对 touch 事件的监听...

实例教学:使用 D3.js 实现数据可视化

原文链接:Learn to Create D3.js Data Visualizations by Example 基于 D3.js ,编写 HTML、SVG 和 CSS 就能让你的数据变得生动起来,这是一个基于数据操作 DOM 的 JavaScript 库。 在我看来,每一位 Web 开发者最应该学习的三个 JavaScript 库就是 jQuery、Underscore 和 ...
2016年08月06日


如何在前端开发中增加编码效率,这里有十款 Chrome 扩展可以帮你

本文由Glowin投稿,首发于 https://zhuanlan.zhihu.com/p/21490434 对于前端开发者来说,Chrome 浏览器绝对是开发过程中不可缺少的利器:不仅仅是因为 Chrome 自带的功能强大的 devtool,更是因为 Chrome 有着各种好用的前端语言调试工具以及诸如 EnjoyCSS、LiveReload 等这类能够提高你编码效率的强大扩展。我...
2016年07月29日


扒一扒 CSS 语言的诞生史

实话说,在过去这一年,这已经成为我好心情的固定来源。即不断地告诉一波波想要像在 TeX、Microsoft Word 等常见的文档处理工具中那样方便地控制 HTML 文档的样式的人们说——安全带系好,受伤别怪我:“很不好意思,你完蛋了!” —— 马克·安德森 1994年 在1991年,蒂姆·伯纳斯·李首次提出 HTML 的时候,并没有给页面添加样式的方法。给定的 HTML 该如何渲...
2016年07月26日


用 React 做出好用的 Switch 组件

关于作者 周林,微博, github,陆金所前端程序员,专注 Hybrid APP 性能优化和新技术探索。欢迎任何形式的提问和讨论。 前言 HTML5 将 WEB 开发者的战场从传统的 PC 端带到了移动端。然而移动端交互的核心在于手势和滑动,如果只是将 PC 端的点击体验简单地移植到移动端,势必让移动端体验变得了无生趣。以某 APP 收银台的支付密码输入框为例,里面的 Switch ...
2016年07月16日


使用 NativeScript 和 Angular2 构建跨平台 APP

作者周林,陆金所前端程序员,专注 Hybrid APP 性能优化和新技术探索。欢迎任何形式的提问和讨论,我的微博。 相比于 ReactNative ,NativeScript 能够摆脱对原生代码的依赖,真正实现跨平台开发,非常适合小团队或个人开发者。写了这个教程,帮主大家快速上手。 前言 “一次构建,多处运行”,跨平台 APP 带着这股风潮把火烧到了前端,为开发者带来无尽的遐想...
2016年07月03日


《Learning WebRTC中文版》试读 + 签名优惠版

《Learning WebRTC中文版》出版啦,外刊君是本书的翻译和审校阶段组织者。本文是该书的 第2章:获取用户媒体,欢迎试读。获取本书的签名优惠版,见文末。 获取用户媒体 创建一个基于WebRTC的通信平台,首先需要通过用户的网络摄像头和麦克风获取实时的视频和音频流。在过去的浏览器中,我们通常用插件来实现这个功能;而现在,我们可以用JavaScript调用浏览器的getUse...
2016年06月26日


使用 Three.js 的 3D 制作动画场景:飞行者

本文译自:The Making of “The Aviator”: Animating a Basic 3D Scene with Three.js 一篇关于探讨使用 Three.js 创建 3D 动画场景的基础教程。 DEMO 源码下载 今天,我们将使用 Three.js 创建一个简单的 3D 飞机飞行的动画场景。Three.js 是一个 3D 类库,它能让 We...
2016年06月12日


Houdini:CSS 领域最令人振奋的革新

原文链接:Houdini: Maybe The Most Exciting Development In CSS You’ve Never Heard Of 想要使用某种 CSS 特性,但是因为浏览器兼容性问题而没法使用?更糟糕一点,所有浏览器都支持这种特性,但支持度不完全,在某些情况下会有 bug 出现、支持性不一致,甚至于完全不兼容。如果你曾经遇到过上述情况(我肯定你一定...
2016年05月20日


用 CSS 实现 Netflix Logo 动画

本文译自:Netflix Logo In CSS 这篇博客是 Gregor Adams 讲他如何用 CSS 重现 Netflix 商标效果。Gregor 是 CSS 方面冉冉升起的新星。能在这里分析他的案例也是非常荣幸的。 我尝试使用 Netflix(译者注:一家在线影片租赁提供商)时,立即就把我吸引住了。我观看了一些不得不在它处才能观看的节目。每一集电视剧或者电影都以 Netf...
2016年05月07日