当前的文章分类为: 前端开发

Google API 二维码在线生成器

17

April

2013

国际惯例,先来个知识普及:QRcode(学名为快速响应矩阵码)是二维条码的一种。并且QR码有容错能力,QR码图形如果有破损,仍然可以被机器读取内容,最高可以到7%~30%面积破损仍可被读取。利用30万像素以上的照相手机,搭配手机内的QR码解码软件,对着QR码一照,解码软件会自动解读此信息,显示于手机屏幕上面。

由于最近在做一些mobile网页,每次测试都要输入网址十分麻烦,于是就想自己搞个二维码的生成工具。虽然网上有蛮多类似工具,可调用起来始终不是很方便,例如以后给每篇博文增加一个二维码,但如果是自己写的,那就想怎么用就怎么用。搜索一翻之后,发现原来Google开放平台已经提供了二维码的API接口,于是便自己着手研究了下。
[ 查看全文... ]

Sublime Text Snippets(代码片段)功能

02

April

2013

我们在编写代码的时候,总会遇到一些需要反复使用的代码片段。这时候就需要反复的复制和黏贴,大大影响效率。我们利用Sublime Text的snippet功能,就能很好的解决这一问题。通俗的讲,就是把我们常用的代码分别保存起啦,然后通过插件的形式来反复调用。

创建方法:Tools > New Snippet

这时你会看到如下示例代码:

<snippet>
     <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
     <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
     <!-- <tabTrigger>hello</tabTrigger> -->
     <!-- Optional: Set a scope to limit where the snippet will trigger -->
     <!-- <scope>source.python</scope> -->
</snippet>

[ 查看全文... ]

Zen Coding 正式改名为 Emmet

01

April

2013

引言:相信对于前端开发人员而言,Zen Coding一定不会陌生。

最近时间发现Zen Coding总是Tab不出来,以为Plug-in出了问题,也没太在意。我想卸载了重装便能解决,结果还是无法正常使用。通过查找,原来Zen Coding已经停止更新,并由一个新的项目“Emmet”来代替了它。

Emmet在继承Zen Coding的基础上,还增强了对JavaScript和CSS3的支持。对于好东西,还等什么?动起你的双手安装吧:

Emmet安装方法:ctrl + shift + p > install Package > Emmet

原有插件卸载方法:ctrl + shift + p > Remove Package > 选择删除项 [ 查看全文... ]

CSS3 3D图书展示 (3D Book Showcase)

31

January

2013

今天的例子,主要实现了:图书的360°翻转和图书打开的过渡效果。

这个效果,是我从一个国外网站上所看到的,由于效果逼真便又开始手痒了起来,自己制作了一个。有时候,光看代码觉得还好,但当自己从0开始制作的时候,顿时变的道路坎坷。期间遇到了很多小BUG和细节上的我问题,不过本人高要求搞标准,看到问题一定要修复的洁癖,这几天一直在不断的修改修改再修改,好在终于制作完成了(T_T)...

虽然花了大把的时间,不过总算有所收获,对CSS 3D Transforms有了一个更为详细的了解过程。平时觉得CSS 3D Transforms并没有那么复杂,想不到实际运用的时候还是会有很多未知的问题在等着你。其中,有个让我非常胸闷的问题。那就是为了偷懒,使用了prefixfree.min.js,导致页面每次加载的时候,都会触发transition-duration,导致有些效果在刷新的时候就执行了一次。我还以为是我哪写错了,寻找了好久... [ 查看全文... ]

卖萌无罪!纯CSS3绘画卡通人物头像~

23

January

2013

其实我也不知道为什么会画这个东西,估计是微博上多秀逗了...

今天画的这个东西,纯粹是练习+蛋疼+卖萌... 制作方法我就不说了,请查看我博客之前所写的一些关于CSS3的文章

支持:手机访问、Google Chrome(谷歌)、Firefox(火狐)、Opera(欧朋)、Safari
补充:如果你是用遨游、搜狗、猎豹、360等等,请尝试使用极速模式,不支持IE访问~ [ 查看全文... ]

如何成为一名优秀的web前端工程师(前端攻城师)?

22

January

2013

程序设计之道无远弗届,御晨风而返。———— 杰佛瑞 · 詹姆士

我所遇到的前端程序员分两种:
第一种一直在问:如何学习前端?
第二种总说:前端很简单,就那么一点东西。

我从没有听到有人问:如何做一名优秀、甚至卓越的WEB前端工程师。

何为:前端工程师?
前端工程师,也叫Web前端开发工程师。他是随着web发展,细分出来的行业。
Web前端开发技术主要包括三个要素:HTML、CSS和JavaScript!
它要求前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化、SEO和服务器端的基础知识,而且要学会运用各种工具进行辅助开发以及理论层面的知识,包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。
随着近两三年来RIA(Rich Internet Applications的缩写,中文含义为:丰富的因特网应用程序)的流行和普及带来的诸如:Flash/Flex,Silverlight、XML和服务器端语言(PHP、ASP.NET,JSP、Python)等语言,前端开发工程师也需要掌握。 [ 查看全文... ]