当下,互联网行业发展如日中天,越来越多的传统行业开始投身互联网,越来越多的人开始了解互联网行业中的产业链关系。大势所趋,一个名谓:“互联网+”的概念诞生了,如今的互联网涉及生活的方方面面,包括购物、旅行、乘车、支付等等方面,可谓是深入人心,但这仅仅是一个概念。 (啊~~~不小心跑题了!!!) 回归正题。在互联网产业中有那么一群人,被冠以高大上的头衔,谓之:前端开发工程师,本文里指的是与网页设计相关的狭义的Web前端开发工程师。大部分人的传统观念认为工程师就是一些出类拔萃,足智多谋,神秘莫测,无所不能的“怪物”。 当然,这不能怪正常人类的认知能力,只能怪互联网自身的虚拟存在的特性。以致于前端开发工程师(当然也包括其他工程师)从事的工作通常都是存在于计算机或其他智能设备之中,很难将其实物化,无法与传统行业实物化的生产相比较,这也让前端工程师们很难向亲朋好友们解释清楚Ta的具体工作,而最终结果便是大家都觉得这是一个很神秘的组织! 那么,前端开发工程师到底是个什么物种呢?说到底,Ta们也就一群普 ...
阅读全文 »

今天我要和大家一起来学习一个酷炫的鼠标Hover效果。主要将会涉及到CSS3中3D效果的使用,以及在实现过程中我们使用到的一些简单的转换算法,我会尽量以图解的形式让理论变得更容易理解。废话不多说,我们先看一下最终效果:Hover特效。打开连接,鼠标进入图片列表区域并移动鼠标,观察对应区域中内容浮层的变化效果,注意:请使用高级浏览器预览(推荐Chrome浏览器)。 预备我们先来做一些预备工作,我们在理解三维效果的时候,通常需要发挥一下自己的空间想象力,在二维的屏幕上看到三维的深度(立体几何中的Z轴)。除此之外我们也需要了解一些基本理论知识,比如透视点/观察点(perspective),比如远小近大等。当然我们还需要掌握一点点简单的数据转换能力,根据变换过程中的一些数据,利用一些简单的数学换算公式,计算得到我们在效果实现过程中需要的数据。再啰嗦一句:空间想象力是非常重要的,好吧,这就够了! 效果分析为了帮助大家构建一个三维空间,我们现在一起来想想一下,正在阅读本文的自己,你的眼睛距离屏幕是有 ...
阅读全文 »

前两天有个朋友问起关于rem的一些问题,让我有些在意。因为随着CSS3的逐渐成熟,在优雅降级/渐进增强原则的保障下,很多CSS新特性已经不在是试用特性,而是在Web设计中得到广泛推行和应用!而CSS3新增的单位rem也在其列,当朋友问起时,我才意识到自己对这个单位也并不是很了解,趁着周末有些闲暇时光,不妨给自己的大脑充充电。 定义 Equal to the computed value of font-size on the root element. (W3C) 直译是“与根元素的字体大小相等”,当然也有一种更直接的理解root em 。我们知道在HTML中根元素其实也就是<html> 元素,所以rem单位其实是相对于<html> 元素的字体大小而言的。 场景为了方便说明rem单位的功效,我们先来构造一个很常用的页面结构,然后分别使用px和rem在对比实现。通常我们在制作博文阅读页面的时候都会先将博文的标题(h2.article-title)显示,然后后面紧跟 ...
阅读全文 »

曾经,一个网页上要用Javascript实现网页内容的复制,其实是很麻烦的一件事情。虽然在这个问题上IE有其高大上的window.clipboardData 方法支持直接复制指定内容,Firefox也早早的支持了document.execCommand 命令,但是因为早期的Chrome不支持浏览器直接操作剪贴板,或者说不支持document.execCommand 命令,让这一功能在兼容性上遇到了瓶颈。所以,聪明的开发者们开始走上“曲线救国”的道路:借助各大浏览器对Flash的支持,通过Javascript与Flash交互,将需要复制的内容传递到Flash中,再调用Flash操作剪切板的命令将内容复制到剪贴板,从而实现了兼容性极强的通过JS脚本复制网页文本的插件。这也就是ZeroClipboard的使命。 The ZeroClipboard library provides an easy way to copy text to the clipboard using an invis ...
阅读全文 »

四年前,作为一个本科应届毕业生步入社会,开始在职场打拼。起初,只是觉得应该只是从一所大学进入另一所大学,没有什么区别。然而,经历了职场的竞争,工作的压力,商战的尔虞我诈,渐渐意识到现实社会的残酷,不再是那单纯的校园。 四年的工作经历,呆过大企业,进过小公司。切身体会到过,工作方式,开发模式,时间及项目管理上的各种差异。独立完成过大、小项目,也见过别人开发的各种项目,才渐渐意识到为何民间流传着这样的说法:初入职场的ITer应该去BAT“镀层金”!当然这里的“BAT”应该只是成熟互联网企业的代名词而已。 当时,虽然我也对大家的观点表示认同,但我不得不承认我的理解其实有歪曲的成分,或者说不到位。我单纯的以为,进入大公司仅仅是为了提升名气和个人影响力,在之后的职位选择和竞争中拥有比别人更优越的,更亮丽的过去,更容易被竞争公司或小企业重视。然而,如今才渐渐意识到这样的理解着实肤浅。 诚然,有过在大公司工作经历的人,或者有过大型项目维护开发的人,在职场竞争中确实会有更大的优势,也更容易获得自己梦寐以 ...
阅读全文 »

一直以来,网页开发对优化方面做的工作从未停止。网页无图也是为了减少页面资源请求而提出的一种畅想。无可厚非在网页开发的历程中在网页无图方面我们已经取得了不朽的成就:从一开始零零碎碎的小图标资源,到后来小图标合并成一个图片出现雪碧图,再到后来Webfont的出现不仅可以取代雪碧图,而且彻底解决了图标管理难,变色实现麻烦的问题。今天我要跟大家介绍一个小工具,也是可以帮助实现网页无图这一终极目标。理论上来讲,它可以将任何一张图片转换成一个不带图片,不带背景图的干干净净的html标签。但是这有前提:你的计算机得有足够的资源去支撑。 缘起那是一个工作日的早上,我向往常一样准时到达了工作岗位上,启动电脑,打开浏览器我偶然发现了一篇名曰《18个你可能不相信是用CSS制作出来的东西》的文章,出于职业敏感,也出于好奇我就点进去看了一看,发现其中有一个很有意思的作品:http://codepen.io/HugoGiraudel/full/gpcwa/,它仅仅用一个div标签就完成了这幅作品,于是我们几个同事好 ...
阅读全文 »

在前一篇文章《File杂谈——拖拽上传前传》中我制作了一个静态的拖拽上传界面,拖拽文件到显示区域释放,可以显示拖入文件的基本信息。本文将在此基础上进一步加工,打造一个完整的拖拽上传示例。 示例说明点击区域选择文件或直接将文件拖入区域,触发文件上传功能,文件将异步发送到服务器。待服务端处理完成后返回基本信息,在页面中显示。由于服务器容量问题,本示例未做文件保存处理,只是简单的将文件基本信息返回,文件上传的后端具体处理逻辑需要自行补充。 新的小伙伴FormData我们知道,传统的文件上传如果要实现异步的效果,我们会使用iframe去模拟,或使用flash上传插件。但是今天,我们又认识了一位新成员——FromData,它可以通过js创建表单对象,并可以向该对象中添加表单数据(字符串、数字、文件等)。再结合我们熟悉的XMLHttpRequest对象,将表单数据异步提交到服务端,这样我们的问题就解决了。 下面,我们来看下核心代码:1234567891011121314151617181920212 ...
阅读全文 »

在《File杂谈——初识file控件》一文中,我们已经对file控件有了初步的了解,并且对制作一个视觉和体验一致的file控件做了较为详细的说明,今天我们继续了解file控件的更多特性,并延伸出更多。 新增属性在HTML5到来之前,绝大多数情况下使用file控件,我们前端工程师需要的有用信息都只能通过value属性获得的文件名字符串来获取(比如:文件类型、文件的直接名称等),这个很不方便,多文件上传的时候就更加麻烦了。另外,我们想不通过其他手段获取上传文件的大小更是一种奢望。 不过,好在这一切并没有那么糟,随着HTML5的到来,file控件上新增了files属性。该属性包括了file控件选择的文件对象集合,每个文件对象包含了当前文件的基本信息(类型、名称、大小)等,这样一来我们再也不用使用正则啊,字符串拆分啊,等等麻烦的方法去获取我们想要的信息了。下面我们在Chrome的控制台看下files属性的结构。我的测试方法是这样的: 首先,使用Chrome浏览器随便打开一个网页,然后F12调出开 ...
阅读全文 »

首先我说明下,这里介绍的file控件指的是网页中的FileUpload对象,也就是我们常见的<input type="file"> 。如果你不是想寻找这方面的东西,就可以绕道了。 功能当我们需要在网页中实现文件上传功能的时候,file控件就可以大显身手了。HTML文档中每添加一个<input type="file"> ,实际就是创建了一个FileUpload实例对象。用户可以通过点击file控件选择本地文件,当我们提交包含该file控件的表单时,浏览器会向服务器发送用户选中的本地文件。从而将本地文件传输到服务器,供其他网络用户下载或使用,实现文件上传功能。 美中不足无可厚非,file控件很强大,给网页上传文件带来了极大的便利。但是,它并非完美! 首先,从控件本身而言,我们可以通过value属性获取到用户选择的文件名称,但出于安全性等因素考虑,该属性无法指定默认值,并且该属性为只读属性。 其次,恐怕也是file控件令很多开发者 ...
阅读全文 »

很多前端开发工程师都对Chrome浏览器情有独钟。原因很简单:一来她启动速度快,执行效率高,给网页浏览带来流畅和快感;二来她实现了很多新的标准,支持很多高级属性,让网页体验更好,更高大上;三来就不得不提一下她的调试工具了,对于前端开发工程师更是无异于左右手。然而,大概是因为强迫症得问题,我今天却遇到一个让我有点接受不了的功能… 由于,我的Chrome开启自动升级功能。所以我的Chrome总是最新的,下图是我目前的Chrome浏览器版本: 而最近我在进行代码调试的时候,发现她的调试工具中多了一些东西——当我们使用断点调试的时候,Chrome调试工具将变量直接输出到了源代码旁边,下面我们一起看下效果: 当然这种设计不可否认有其好的地方:运行时变量直接可见,很方便查看,多数时间不需要再将鼠标移到变量上甚至使用 Watch 功能来查看了。但是她为什么会让我感到不爽呢? 我个人觉得,她也有不好的地方:其一,在源代码中输出运行时变量,虽然有颜色区分,但不得不承认会一定程度降低源代码的可读性;其二 ...
阅读全文 »