轩枫阁

前言

不只在浏览器端玩代码，还会在服务器端玩 Node、Java 等等，玩运维、玩网络，从端到云地变化，我们将会是新时代的全栈工程师。

不只在 PC 端玩代码，还会涉及移动端（Android 和 iOS），甚至是电视端、家电端，浏览器端已经不能满足我们，请叫我们全端工程师。

全栈工程师

全栈工程师，也叫全端工程师，英文Full Stack developer。是指掌握多种技能，并能利用多种技能独立完成产品的人。

1. 价值

全局性思维

现代项目的开发，需要掌握多种技术。互联网项目，需要用到后端开发、前端开发、界面设计、产品设计、数据库、各种移动客户端、三屏兼容、restFul API设计和OAuth等等，比较前卫的项目，还会用到Single Page Application、Web Socket、HTML5/CSS3这些技术以及像第三方开发像微信公众号微博应用等等。

Web前端也远远不是从前的切个图用个jQuery上个AJAX兼容各种浏览器那么简单了。现代的Web前端，你需要用到模块化开发、多屏兼容、MVC，各种复杂的交互与优化，甚至你需要用到Node.js来协助前端的开发。

所以说一个现代化的项目，是一个非常复杂的构成，我们需要一个人来掌控全局，他不需要是各种技术的资深专家，但他需要熟悉到各种技术。对于一个团队特别是互联网企业来说，有一个全局性思维的人非常非常重要。 查看全文

前言

也许你有注意到本站的logo，点击之后，会产生一个纸飞机飞翔的过程，是一个3D动画效果，目前仅支持webkit内核浏览器预览效果。

demo地址

http://xuanfengge.com/demo/201402/plane

实现原理

整个动画过程包括

消息面板翻转、飞机两翼折叠、飞机平放预备飞行、飞机后退助跑、飞机向前飞翔、整个过程的背景颜色过渡。

简单解析

主要的动画效果（步骤分解状态）使用CSS3的变形(transform)、转换(transition)、动画(animation)、视图距离(perspective)等等新属性实现，并结合js的setTimeout控制动画时间，通过增减css的class来实现整个过程动画。 查看全文

现在来为大家播报一些前端FE近期所发现的技巧。厌倦了陈旧的理论描述，来看看又有什么新技巧吧，绝对新颖

webkit语音搜索属性删除

你注意到轩枫阁搜索框右侧的麦克风图标了吗？这是 Chrome 11 开始支持的语音识别功能（在 input 元素中增加「x-webkit-speech」属性实现），现在Chrome打算删除该属性，推荐使用 JS API 来代替。

详细：https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/nGFTVcfk8dY

如何使用webkit语音搜索：http://www.xuanfengge.com/html5-voice-search.html

开发者工具位置

想让开发者工具放到左边吗？Chrome 34 满足你！需要开启chrome://flags/#enable-devtools-experiments，然后在设置中选中「Enable dock to left mode」

变更集：https://chromium.googlesource.com/chromium/blink/+/376dc6e

chrome噪音标签

Chrome 32 正式版发布，带来了全新的噪音标签显示功能，比如当某个选项卡中在播放声音时就会标示出一个小喇叭。

详见：http://chrome.blogspot.com/2014/01/everyone-can-now-track-down-noisy-tabs.html 查看全文

前言

Patrick Catanzariti 是一名自由Web开发工程师，近日国外网站sitepoint刊登了一篇他写的《JavaScript Beyond the Web》，文内介绍了JavaScript在物联网中的作用，很有意思。现将文章翻译如下：

短短几年间，在人们眼中JavaScript已迅速成长为最有价值的语言。在Netscape Navigator浏览器初期，Javascript的诞生让我们眼前一亮，我惊奇的发现，我竟然可以修改网页上对话框的文字了。

从那时起，JavaScript成长的速度远远超过了我的预期，我们现在所看到功能强大的Web应用、移动应用、Windows 8 应用，甚至整个服务器都在使用JavaScript。

我认为最激动人心的是这种语言，现在还可以用来控制和监控你的移动电话、开关灯具、机器人，增强Google Glass，以及手或手指之间的感应等。

在这篇文章中，我会介绍一些JavaScript在“物联网”里的应用，让JavaScript开发者从而了解并能从现在开始可以从事这方面的工作。

如果你是一名JavaScript程序员，想通过自己的技术将互联网世界无缝的衔接起来，就要比其他程序员思考的更多，现在身边的一些高科技产品就具备着很多即诱人又有创新性的机遇。 查看全文

前言

在CSS3盛行的年代，我们要学会极致的运用它的属性来装点我们的网站，学会CSS3的渐变就可以做出一些非常炫的效果。

应用点

在没有CSS3之前，为了显示一个渐变而专门制作一个图片，这种不法不但不灵活还增加请求数。那我们能用gradient做些什么呢？做渐变背景、做渐变导航、做按钮、按钮的四态（default、hover、active、focus）、绘制图形、配合CSS3动画做特效等。

Gradient语法

1、线性渐变的语法

对象选择器 {background:-浏览器前缀-linear-gradient( 起点方向,起点颜色,终点颜色);}

2、径向渐变的语法

对象选择器 {background:-浏览器前缀-radial-gradient( 起点方向,形状,大小,起点颜色,终点颜色);} 查看全文