肥客泉

2017年大前端发展趋势

回顾2016年前端市场，可谓如火如荼。各种前端的框架/库层出不穷，给大家带来方便的同时，也使得前端开发人员面临更多的学习成本。

2017年的前端会有怎样的变化呢？

一、微信小程序

微信小程序

微信小程序是一种可以媲美原生app的“app”，上市当天便在业内引起较大轰动。其实早在小程序之前也有百度轻应用这样的产品，很遗憾并未做起来。

究竟小程序会爆发多大的威力，我们拭目以待。但是可以肯定的是，一定会催生大量的小程序开发人员。而小程序用到的开发语言，就是我们前端的Javascript。相对于其他开发人员，这也是前端开发的一波红利。

二、Vue.js

Vue.js

是一个构建数据驱动...

2017.04.14 /热度：1

2015年开始直播变得越来越流行，很多的直播平台也应运而生，直播是一个很有技术的项目，从服务端到客户端到web等等。我们将写一序列的博客来阐述直播中的技术，这包括服务端技术和客户端技术。包括最简单的服务端环境部署、客户端编译、采集、推流、拉流、美化特效、水印、延时优化、音视频同步、p2p等等。当然还可能包括一些信号处理的知识，比如滤波，傅里叶变换（FFT）。从本文开始我们将从环境部署开始，这包括两方面的环境部署即服务端和客户端。

1、服务端

在部署服务端环境其实包含很多东西的，最常用的web服务nginx，数据库Mysql、Nosql，api开发最多的三种选择：

java环...

2016.09.05

来自中国的超级APP如何改变整个互联网

中国的网络公司抄袭美国硅谷成功案例一直为人所诟病，被人们戏称为c2c（copy to china）。但是近来，美国人民惊讶的发现，中国的移动互联网已经跑在了美国的前面，甚至出现了KFC：“Kaobei from China（从中国拷贝）”……

中国的移动互联网发展已经远超外国人的想象。外国人做了个介绍 wechat（微信）的视频，让美国人民感受了一把微信的强大！

2016.09.02

松下2万流明投影机惊艳里约奥运开幕式

相信不少看过里约奥运会开幕式的人都被其出神入化、充满魔幻色彩的舞台所吸引。预算仅为伦敦奥运十分之一的里约奥运开幕式，将高创意展现得淋漓尽致。创意的背后是高品质专业设备的支持，是114台松下20,000流明投影机的持续助力。投影，这个近年来视频影像行业的一大热词，在开幕式解说词中也多次被提及。而网上更有评论称"这是一场靠投影撑起来的奥运开幕式"。

　　本次奥运开幕式上所用的投影设备均来自松下电器。作为TOP赞助商，松下为里约奥运会及残奥会提供影像支持及系统操作等解决方案在内的、至今为...

2016.08.23

全栈工程师技能图谱

前端技能图谱

基础
- HTML / CSS
- JavaScript
- DOM
中级篇
- 数据格式（如JSON、XML）
- RESTful API交互（如jQuery Ajax，Fetch API，ReactiveX）
- 正则表达式
- HTML语义化
- 命令行
- Node.js
- DIV / CSS
- SCSS / SASS
- 矢量图形 / 矢量图形动画（如SVG）
- 单页面应用
高级篇
- ES6 / TypeScript
- CSS3...

2016.08.05

Web文件上传方法总结大全

文件上传在WEB开发中应用很广泛，我们经常发微博、发微信朋友圈都用到了图片上传功能。

文件上传是指将本地图片、视频、音频等文件上传到服务器上，可以供其他用户浏览或下载的过程。

今天我给大家聊聊常见的文件（图片）上传的方式和要点处理。

表单上传

这是传统的form表单上传，使用form表单的input[type=”file”]控件，可以打开系统的文件选择对话框，从而达到选择文件并上传的目的，它的好处是多浏览器兼容，它是web开发者最常用的一种文件上传方式。

表单的代码如下：

<formmethod="post"action="http://uploadUrl...

2016.07.29

响应式Web设计 – 布局

写在前面

去年上半年，我开始着手推动项目中响应式设计的落地。以官网优化需求为契机，主动去做了响应式的页面设计，也说服了产品、设计和开发的相关同事一起把它上线落实，但不幸的是，由于各种方面的原因，比如，生搬硬套的PC模块，无差异化的设计使得移动端阅读不佳，导航兼容性有限等等原因，上线几个月后又悄然下线。我不禁反思，项目中是否应该推行响应式？今年年初重新启动了全站响应式项目，从产品、交互、视觉到开发，各个角色全方面参与了响应式项目，最终门户的页面实现全面响应式。在项目过程中有技术沉淀，也有不少的思考，也就有了以下的文字。文章的内容围绕四个方面，响应式的概念，实践方法，一些案例，以及一些看法。

概念...

2016.07.25

游戏！ 20个有趣好玩儿的网站游戏化设计案例

好看的网站成千上万，但是好玩的网站相比之下并不多。不过，现代技术的发展为新的玩法提供了更多的可能性。Flash 的死亡并不值得哀悼，它为WebGL、HTML5等更优秀的技术提供了更大的施展空间和契机。更优秀的性能控制和更大的施展空间，让想法更加跳脱的设计师和开发者在网页中玩出更多的花样。而今天我们要聊的，就是这些充满活力、玩转交互的游戏化的网页设计案例。

目前大热的页游绝大多数在交互上更贴近以往传统的端游，而我们说的游戏化网页则是另外一种情况，它们在交互和体验上有着更高的标准和更创新的思路。这些网站中的小交互、小游戏也许没法将中土世界里面七八个种族几万年历史都塞进来，但是它们让整个网站体验更...

2016.06.30

利用css3-animation来制作逐帧动画

前言

趁着还没有元旦之前先码一篇文章，不然到时候估计又被各种虐了，所以趁现在还有力气先来一篇。今天来聊聊css3中的动画属性animation，对这个属性懵懂是在很早的时候有前辈用这个 animation 属性来写了一个菊花打转的loading，然后google了一下知道了有这么一个css动画组件叫做 animation.css 其实还有很多这种动画组件，他们很多都是基于jquery来操作的。今天我们不是来谈他们怎么用的，只是来了解一下执行这些动作后的这个animation属性，到底是怎么起到作用的。

先上最终demo：奔跑的小人物
或者拿出手机手机扫一扫 ...

2016.06.21

谷歌开发逆天芯片 - 动动手指就能控制家里所有设备

在智能设备高度普及的今天，你能想到最酷炫的设备操作方式是什么？无外乎键盘、触摸和语音罢了……

Siri: 对不起，我不能这样，也不能那样！而且我什么也都听不懂……

你再来看歪果仁是如何玩的，瞧瞧这是在干嘛！

搓手指的灰？

再看看这是在干嘛！

在芯片上方搓手指的灰？

我很为你们捉急啊！他们是在用谷歌的 Project Soli 来操控数码产品！

Project Soli！？呃，那是什么呢？

Project Soli 是由谷歌的 ATAP（Advanced Technology and Projects）团队带来的最新黑科技，让你不...

2016.05.31

中文版来了！新版MATERIAL DESIGN 官方动效指南

编者按：前两天Google 刚发布了新版Material Design 官方动效指南，今天@平行煎餅就给大家带来了中文版！全文包括三个部分：为什么说动效很重要？如何制作优秀的Material Design动效及转场动画，动效的意义。新鲜热辣收好不谢！

在Material design的世界中，动效用一种优雅、流动的方式来描述空间关系、功能、和意向。

为什么说动效很重要？

动效可以向我们展示一个App 是如何构成和用途。

动效可以做到：

不同视图之间的焦点引导。
当用户完成了一个手势后，提示用户将会发生什么
明确元素之间的层级和空间关系
当程序在...

2016.05.13

知道这20个正则表达式，能让你少写1,000行代码

正则表达式，一个十分古老而又强大的文本处理工具，仅仅用一段非常简短的表达式语句，便能够快速实现一个非常复杂的业务逻辑。熟练地掌握正则表达式的话，能够使你的开发效率得到极大的提升。下面是@技匠整理的，在前端开发中经常使用到的20个正则表达式。

正则表达式经常被用于字段或任意字符串的校验，如下面这段校验基本日期格式的JavaScript代码：

var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/; var r = fieldValue.match(reg); ...

2016.05.11

花了 7 天看了上千个交互动效神作，我总结出 5 个技巧

首先，我想大家会有这样的问题：什么是微交互（micro-interaction)？

来自 UXPin（一款在线可交互原型制作工具）的 Carrie Cousins 给出了如下定义：“微交互是在交互设备上的单一交互流程的细节优化。”

可能不是太容易理解，那就多看几遍吧。

在进入正题之前，有一点我要先声明一下，接下来我要分析的 UI 动效都是出自非常牛逼的大神之手。我非常尊敬他们和他们的作品，他们非常乐意分享他们的经验和未完成的稿件。不过在我分析作品的时候不少设计师的态度都非常差。这可不是我的风格。我都是用严肃的眼光去看待设计的，但是会用娱乐性的方式表达我的观点。如果我碰巧说了些...

2016.05.07

你的B计划在哪里？

作者：阮一峰

日期： 2016年3月15日

（说明：本文原载我的《财新周刊》专栏，2016年第七期）

春节同学聚会，大家聊起近况。

甲在实体经济部门工作，企业效益不好，正酝酿减员增效，他忧心忡忡，跳槽都不知道怎么跳，因为全行业都不景气。

乙从事互联网工作，行业发展热火朝天，新事物层出不穷，但是他已人到中年，技术老化，跟不上行业新陈代谢的速度，公司又实行末位淘汰制，他自觉难以与年轻求职者竞争。

谈到未来，他们都很有压力，感到不乐观，甚至苦闷。一个现实的问题是，如果现在的工作干不下去了，未来怎么办？

我正好思考过这个问题，就问他们，是否听过"B计划

2016.03.21

Docker会是改变世界的那只“箱子”吗？

很多时候，我们面临未来的预测和期望，其实很多答案已经存在在历史中。
改变世界的“箱子”“没有集装箱，就不会有全球化。”，《经济学家》这个评论可以说是对于这个普通的箱子的历史性地位的一个总结。1956年4月26日，当集装箱之父麦克莱恩第一次将集装箱这种方式用于货物运输时，他肯定想像不到他的这个看似普通的发明，会对这个世界的影响如此深远。因为如果把全球经济比作一个高速运转的复杂的机器，那么以集装箱为核心的现代运输体系就是带动这台机器高速运转的齿轮和传送带。

这只普通的箱子，技术含量不高，也并不复杂。和其他很多伟大的发明一样，它的发展也是历经坎坷。集装箱的概念在20世纪二三十年代就出现了，但是直到1957...

2016.01.06

Hashids如何生成唯一且不可预测的 ID

它的原理就是从数字经过一个加盐(salted)算法产生一个哈希(hash)字符串。这样算法就是通过混淆使结果具有不可预测性，而唯一性依然由数字本身来达成，从而得到(类似 youtube 里的)足够短，不可预测且唯一的 ID。

使用方法也很简单。先设定一个字符串作为 salt。

var Hashids = require("hashids"),

hashids = new Hashids("this is my salt”);

然后对数字(准确来说是数字数组)进行编码

var hash...

2015.11.12

为什么要设计H5页面

移动设备的普及给媒体和娱乐带来了一场革命。根据中国互联网信息中心（CNNIC）2014年7月的报告显示，中国网民中，手机使用率达83.4%，已经超过传统PC整体80.9％的使用率。其中，手机网络新闻的使用率为74.2%，仅次于即时通信和搜索，远超其他手机网络应用。在资讯移动化的趋势下，观察近期各大门户在重大事件报道中的表现，会发现移动优先、产品社会化、交互趣味化是三个重要的趋势。其中，基于HTML5技术的移动Web页面（以下简称H5页面），较完美地融合了上述三种属性，成为当下最受关注的内容报道形态，也引爆了社交平台上的大规模分享行为。

就像CD取代磁带成为一种更高效的音乐播放方式一样，数字文...

2015.10.28

Nginx配置详细解 nginx.conf

# 定义Nginx运行的用户和用户组

user nginx;

# nginx进程数，建议设置为等于CPU总核心数。

worker_processes 1;

error_log logs/error.log;

# error_log logs/error...

2015.10.13

SQL Server 之数据库语句优化

一切都是为了性能，一切都是为了业务

一、查询的逻辑执行顺序

(1) FROM left_table

(3) join_type JOIN right_table (2) ON join_condition

(4) WHERE where_condition

(5) GROUP BY group_by_list

(6) WITH {cube | rollup}

(7) HAVING having_condition

(8) SELECT (9) DISTINCT (11) top_specification select_list

(9) ORDER BY order_by_list...

2015.09.28

如何在PS上直接使用FONTAWESOME图标？

估计很多前端人员都知道FontAwesome是一套免费而且好用的Web字体图标，只要在CSS引入这个字体icon，它就可以直接通过class来生成一个图标，而且免费使用。目前图标数量已经更新至585个之多，包含常用的APP UI应用图标、品牌图标等。今天教大家如何将FontAwesome直接在Photoshop或AI上使用，这样日后做UI设计也方便多了，下面我们说说方法。

STEP 1：下载Fontawesome字体

官方下载地址：http://fortawesome.github.io/Font-Awesome

下载后，将TTF文件安装到系统的字体目录。

STEP 2：在PS或AI...

2015.08.28