国庆黄金周已经悄然离去,在假期到来之前微信小应的出现着实引起了不小的反响。虽然目前微信小应用并没有对所有开发者开放,但也有很多开发工程师已经在本地进行了尝试,甚至实战。踩着国庆黄金周的尾巴,我也自己体验了一番——开发微信小应用:你问我答。 新建应用第一步,当然是要安装微信小应用开发软件(微信web开发者工具)。很多人可能感到很熟悉,因为这就是之前微信团队开放的基于微信APP进行移动网页远程调试的工具。最新版中改成了小应用开发工具,我们可以前往官方网站下载最新版(目前是v0.9.092300)。你还可以在该网站查看有关微信小应用的更多信息,如图所示: 第二步,启动开发工具,创建新应用。由于是第一次创建项目,所以工具启动界面很简单,根据界面提示点击“添加项目”会进入到项目基本信息填写界面。这里需要注意的是,也许是由于目前微信小应用开发并没有向所有开发者开放,从公众号中查看到的appKey并不能正常使用,所以我们在“AppID”栏选择“无AppID”。“项目名称”栏没有特殊要求,根据你自己的 ...
阅读全文 »

前段时间和一群小伙伴讨论了一个名为《大话前端-从小书签应用说起》的话题。内容是前端开发中极小,乃至已经被一部分前端开发工程师遗忘掉的一部分——书签应用(Bookmarklet)。但是,我们需要明白,台湾虽小但终是中国的一部分,书签虽小,也是前端开发的一部分。技术不分大小,合理使用就能创造价值,用好了就能有所创新。 还是在2012年前后,那时刚步入社会的我对前端充满了好奇,正逢前端开发风生水起。国外各种好的前端开发技术开始进入到我的视野,因“瀑布流”布局被国内前端开发工程师纷纷效仿的Pinterest网站,也在其列。后来国内的同类网站“花瓣”、“蘑菇街”等,纷纭而至。而Pinterest的工程师开发的图片采集书签应用,第一次带我感受了浏览器书签应用的神奇。 书签小工具,是一种小型的JS程序(Applet),以网址(URL)的形式被存为浏览器中的书签,也可以是网页上的一个链接。小书签的英文名,Bookmarklet是由Bookmark和Applet组合而来。无论小书签以什么形式存在,它们 ...
阅读全文 »

忙忙碌碌又半年,别人都在做年中总结,回顾上半年点点滴滴的辛酸历程,或辉煌战绩。而我好不容易在时间隧道中捕捉到片刻的闲暇,终于可以做一点自己的事情。最近,其实也是由于项目需要,用Node.js写了一些有助于前端开发的本地小工具,才逐渐意识到Node.js似乎离自己越来越远,于是又想找回与Node.js的那些甜蜜时光。然后,思来想去还是从一个简单的命令行工具开始吧。 为什么做这个尝试?为什么从一个命令行小工具开始?我也曾问自己这个问题。首先,为了弥补自己在这方面的缺陷。自从接触-学习Node.js以来,除了知道Node.js有开发命令行工具的能力外,仅仅使用过一些开源的Node.js命令行工具,诸如:express、yeoman、gulp、grunt等等。但自己却从未去了解过其中的奥妙。其次,身边各种Mac OS、Linux系统使用者频现,流畅熟练的命令行操作显得格外帅气和高大上,有一种身陷科幻大片的感觉。再次,姑且不说掌握这个技能是否存在其价值,但这毕竟也是一种Node.js的尝试,一项有 ...
阅读全文 »

首先呢,我要感谢一下和我配合的设计师同学,给了我一份如此漂亮的时间线设计稿。拿到设计稿后,我们首先要做的是去分析整个作品的结构,及设计意图。当然这些工作我们可以提前完成,在设计师设计的时候进行充分沟通,而当我们动手去实现的时候就更为得心应手了。开始之前,我们还是先看看最终的交互效果: 第一步,分析控件结构,说多了反而容易引起误导,直接看图吧,直观明了: 接下来,我来说说我为什么要这么去划分。简单的说,在我看来分析一个控件的结构,其实就是尝试去发现一些规律性的东西。如上图,在月份栏很明显是在每月第一日的位置上方显示当月标签,因此第一行自然可以独立成一个在特定位置显示月份信息的独立区域。而第二行更明显,将时间线上的每一天从左往右挨个儿显示就行了,很显然这一行上只会出现具体天的数据,所以我也将它独立成一个区域。再往下,我们先看最下面的刻度区域,这里存在一定的迷惑性,由于每月第一天的那条线高度刚好填充满,而两个月的第一天刚好将整条刻度划分成一个一个的小区间,但事实上,我觉得它们其实就是一条 ...
阅读全文 »

最近,我遇到一个令人苦恼的问题——如何将XMind做的结构图导出为Excel文件?首先我们来预览一下这张脑图中的一小部分。 本来这实在算不上什么苦恼,打开XMind文件,依次:“文件(F)”——“导出(E)…”——“表格文件”——“Microsoft Excel[Pro]”,然后“下一步”就可以完成这个任务。但是,就是那个“[Pro]”硬生生将这个问题变得无比的复杂。对于一向只用XMind免费功能的我来说,要完成这项Pro版本中才支持的功能,实在是心有余而力不足。虽然只要支付不算太高的购买费用就可以轻松解决这个问题,但就为完成这个偶然得不能再偶然,使用几率小到可以忽略的问题来说,着实有点不值当。 然而,过程虽然曲折,但结果却让人欣慰。我最终没花一分钱,依然交出了一份还算满意的答卷。接下来,诚邀大家与我一起重温这一段旅程——一段技术人员投机取巧的旅程。 我们回归到问题的根源:免费版的XMind无法直接导出为Excel文件。那么除了XMind软件本身,是否还有其他软件能够识别.xmind文 ...
阅读全文 »

有请提示:文中涉及较多Gif演示动画,移动端请尽量在Wifi环境中阅读 前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能。掌握各种调试技巧,必定能在工作中起到事半功倍的效果。譬如,快速定位问题、降低故障概率、帮助分析逻辑错误等等。而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,提升工作效率,掌握前端开发调试技巧尤为重要。 本文将一一讲解各种前端JS调试技巧,也许你已经熟练掌握,那让我们一起来温习,也许有你没见过的方法,不妨一起来学习,也许你尚不知如何调试,赶紧趁此机会填补空白。 骨灰级调试大师Alert那还是互联网刚刚起步的时代,网页前端还主要以内容展示为主,浏览器脚本还只能为页面提供非常简单的辅助功能的时候。那个时候,网页主要运行在以IE6为主的浏览器中,JS的调试功能还非常弱,只能通过内置于Window对象中的alert方法来调试,那时候看起来应该是这个样子: 需要说明一点,这里看到的效果,并非当年的IE浏览器中看到的效果,而是在高版本IE中的效果。此外 ...
阅读全文 »

多年前,有知名企业前端前辈如是说:前端是做什么的?在一个网页上你看到的就是前端工程师做的。也有人说:前端是设计师在UED最亲密的合作伙伴。很显然,这些概念放之今日都显得太片面。 诚然,让时光倒流几年,回到div+css刚刚统治网页设计前端领域的时代,将设计师制作的设计稿用html+css的形式高质量的还原,并最终呈现给互联网用户,这几乎就是前端工程师的全部。如果还能用Javascript(后简称:JS)给页面增加一些动画或其他交互效果(如:无缝滚动、选项卡等),那简直堪称大神了。所以那个年代,前端开发者并没有大放异彩的条件,地位显然还很低,而那时IE6还是事实上得标准。 随着历史的发展,时逢谷歌Gmail网页版邮件服务问世,Web富应用时代逐渐到来。Gmail使用的异步刷新(Ajax)模式,为网页前端开发开启了新纪元。Ajax技术可以让同一个网页中的内容在互不影响的情况下分批次的在必要的时候进行更新。这极大程度上降低了网页白屏时间,在用户浏览的同时进行内容更新而不刷新页面,保证了用户访问 ...
阅读全文 »

今天打开浏览器,眼光突然锁定在了收藏栏(“前端”)上。细想,原来已经很长时间没有整理自己的收藏夹了,随意点开几个收藏链接,发现其中还是有很多可以品评和学习的东西。圣人云:“温故而知新”,所以我临时决定将收藏夹中的前端资料整理成文,放到博客上与大家分享,也许热心的前端开发同学也能在茶余饭后拾得有用的只言片语。 分类名称极具个人特色,没有特别意义,甚至可能存在少数链接归类不科学或已失效,希望大家热心指出,也欢迎大家转载或重新归纳。 前端Sites 欢迎来到前端交流 - 前端交流|html5|css3|javascript|RIA,默默地为前端技术在国内的发展作出微薄的贡献 Desmos | Beautiful, Free Math Unicode character table FROONT – design responsive websites in the browser GroundworkCSS ♥ A Responsive HTML5, CSS & Javascript ...
阅读全文 »

最近有身边的朋友在为自己做的产品录制一些简单的使用教程。为降低使用者的学习成本,让我们的产品变得简单易用,这是一件值得去做的事情,但是在教程的制作上面有多种选择,各有各的优点,也各有各的劣势,这里我就简单介绍一下我所了解的教程录制工具。 一、有声有色可编辑通常而言,教程应该根据操作步骤,一步一步将使用过程录制成视频,并配以简洁明了的语音说明。这对于用户而言,学习成本最低、最容易理解。有很多软件可以做到这种程度,比如: Camtasia Studio (Windows 平台下最好用的屏幕录像软件) Screenflow (号称 Mac 上最好的录屏软件) 这类软件不仅可以将操作者在屏幕上的行为完整的录制下来,而且兼具录音功能,可以同步将电脑中播放的声音或用户自己补充说明的语音进行录制,并最终合成导出各种格式的视频文件。不仅如此,它们甚至可以在教程录制完成后对操作过程中的误操作进行剪切,重新编辑,功能非常强大。但是,这类软件也有其显著的缺点:其一,软件自身比较大,下载和安装成本比较高;其 ...
阅读全文 »

发现随着互联网行业的不断发展,作为一个IT从业者,必须清楚的意识到人才需求的变化。在互联网经历了一个快速发展的过程之后,许多互联网企业,都已经拥有了自己成熟的产品。然而一个产品要长久发展,并保持上升的势头,绝不可能一尘不变。功能上的不断拓展,性能上的不断优化,只是基础保障。不断的创新才是关键。不难发现,已经有很多大公司,大企业开始由寻找技术型人才逐渐升级为挖掘富有潜力的创新型人才。所以,IT开发者需要更多的历练来丰满自我,虽然这必将带给开发者更大的压力,然而这确实必须面对的现实。 看清「知人者智,自知者明」,只有自知的人,才是真正的觉悟者。所以,欲求突破,更上一层楼,首先要看清自己,做到自知。也许在你所处的环境中,你总觉得你的表现还差强人意;在你的潜意识里,你总觉得你尽显完美。其实不然,现实是很果感的。所谓当局者迷,尤其是性格傲慢,不可一世的开发同学,自己是很难发现自己的缺陷和问题的,当你与周围的人毫无保留的客观交流时,相信你会恍然大悟。到那时候,你才会真正认识到自己的渺小和无知,才会知 ...
阅读全文 »