通过眼前的浏览器,我们看到全世界 —— 谈谈网页开发

本文献给正在寻找工程师的伙伴们,和即将开始工程师生涯的少年们

好久没有在ukisama上面写自己擅长的内容了,截止到今天凌晨,互联网上已经有大概6亿8千万张网页,而且依然在迅速增加。今天就来严肃地展开一下网页工程师的话题吧,关于他们的工作,关于他们的职业;关于HTML,关于Python;关于浏览器,关于这个世界。

周围有一些朋友的孩子也快要诞生了,将来可以考虑做个网页工程师呢~

每天的我们,在(还算)安静的办公室里,面对着电脑屏幕,忍受着窗外的喧嚣,随手点开浏览器,输入一段URL,敲下回车键。有没有这样的体验,网站瞬间被打开了,高质量的内容,干净的布局和优秀的设计让你过目难忘。感到吃惊是吧?这一切都归功于一类人,网页工程师,所谓的 Web Developers 们,他们不仅负责网站的搭建和网页的编码,还负责各种测试分析,以及一切和网站相关的维护。

如今网页的重要性毋庸置疑,在商业上,好的网站已经是企业保持竞争力的重要环节。伴随着网页开发技术的日新月异,优秀的网站层出不穷,网页工程师对于自己的工作已经不能有半点马虎,成为一个好的网页工程师也没有任何的捷径。

但问题就来了,正在频繁迭代产品的苦逼创业者们,应该寻找怎样的网页工程师呢?想成为网页工程师却只是刚刚试水HTML和JavaScript或者刚刚开始了解Python和Ruby的童鞋,又应该如何规划自己的技术之路呢?

登录过智联前程大街猎聘周伯通拉勾等等网站,浏览过各类工程师在线课程,接触过网页工程师相关的招聘和应聘的,应该不难发现一个趋势,就是这群人被集中分成了三大类:

前端工程师,后端工程师,全栈工程师

一个一个来说吧

 

1. 前端工程师 Front-End Developer

 

和用户发生交互的那一部分叫做网页的前端,说白了它就是你在浏览网页时可以看到的所有东西,字体、颜色、导航栏、下拉菜单、滚动的图片,等等等等,这一切都是由 HTML + CSS + JavaScript 拼装而成,在浏览器的渲染下变得井井有条,很神奇的!

 

相关技能和工具

 

前端工程师主要负责网站面向用户部分的代码,以及用户体验相关的架构。一个前端工程师必须熟练地掌握三门基本的语言:HTML,CSS和JavaScript。除此之外,前端工程师还应该熟悉一些样式框架比如Bootstrap和Foundation,和逻辑框架比如Backbone,AngularJS和EmberJS,这些框架确保了网页在不同平台上的质量和稳定性。最后还应该能够熟练的使用一些基本的工具库比如jQuery和SASS/LESS,这些能让开发更加高效,代码更加优质。

另外,很多招聘文案中都会要求求职者有Ajax的开发经验。Ajax技术使用JavaScript默默地和服务器通信来动态加载网页内容,以实现无缝的浏览体验。虽然这不是所有网站都必须的,但这也可以算是前端工程师的基本功之一,毕竟Ajax技术如今也越来越多地被应用到了网页中。

有了前面说的这些技能,前端工程师就可以很好的和设计师合作,和用户体验分析师合作,把草图和原型开发成成品。牛逼的前端工程师还能精确的发现用户体验相关的问题,给出建议和解决方案,用代码来增强设计。一个好的前端工程师还应该能够和业务人员流利的沟通,明白他们的目的,理解他们的需求,了解市场上的机会,并且顺利地执行。

总之在后端工程师造好屋子以后,前端工程师主要负责房屋的内饰。至于房屋的类型和品位,这就取决于房屋的主人了。相比于后端,前端工程师一般来说更加满足于自己的成果,毕竟这是一份技术和创意相结合的工作。经验丰富的前端工程师不仅是一个技术人员,不仅是一个Geek,因为他不仅实现了用户可以看到一切和可以交互的一切,还致力于给用户留下过目不忘的印象,所以他也是一个视觉达人。

 

那我们看到的网页是怎么来的呢?

 

再补充一下这个很多人都关心的话题吧,在网页开发过程中,设计师绘制Logo和图像,摄影师拍摄照片,文案编写文字,最后由前端工程师把它们组装在一起,用网页向我们阐释所有内容,用网页向我们提供独一无二的体验,把我们在网站上看到的所有内容变成可能。

体验一下? 点击打开 http://wedfairy.com 向下滑动页面的过程中上面的 八音盒 导航栏慢慢出现,把鼠标移动到“八音盒故事”的某个案例上面或者用手指按住一个案例,标题就会出现,这些都是前端工程师的功劳。

 

2. 后端工程师 Back-End Developer

 

新的问题来了,网页上的数据存在哪里?API又是什么?

就像一间没有造好的屋子,光有室内装饰还是远远不够的。于是我们还需要后端工程师。网页的后端包括服务器,应用程序,以及数据库。这些组件相互作用,使用API和前端通信,确保了网页前端的存在。后端工程师的主要工作就是搭建和维护这些组件。

 

相关技能和工具

 

相比于前端开发,后端开发的技术和工具比较多元。为了实现服务器、应用程序和数据库三者之间的通信,后端工程师通常使用Python,Ruby,PHP,Java,.Net等语言来编写应用程序,用MySQL,Oracle,MongoDB来查找、存储和修改数据,然后把它们部署到服务器上来为前端代码提供支持。在实际工作中,后端工程师至少需要掌握一个开发框架,比如PHP的Zend和Symfony,或者Python的Django;还需要能够熟练使用版本控制工具,比如Git和SVN;以及了解Linux开发环境。这些看起来比前端开发枯燥多了!

后端工程师需要使用这些框架和工具来为网站编写优质的代码,有可读性,可移植性,有完备的文档。然而和前端工程师一样,在开始埋头编码以前,后端工程师需要和业务人员充分沟通来理解他们的感性目标,将其转换为技术需求,提出具有可行性的有效方案,来搭建技术架构。

优秀的后端工程师同样热爱自己的工作,沉浸在后端的他们从来不觉得无聊,反而乐在其中。他们喜欢玩弄数据,编写出有用的API,按照不同的权限分配给网页前端、移动应用和其他系统,让前端工程师可以安心的沉浸在交互和布局中。通俗易懂的高质量的API受人尊敬,这就是后端工程师的价值所在。

 

我们怎样才能感受到后台的存在?

 

点击 http://qidlove.com 打开婚礼邀请函。此时 八音盒 的服务器会把信息发送到你的手机或电脑中,然后变成你所看到的内容。这就是后台工程师所做的事情。如果你向下滚动屏幕到最后,留下自己的姓名和祝福,点击发送,别人就可以看到你的留言,下一次你再打开这个网页,留言也不会消失,这些都多亏了后端工程师啊!

 

3. 全栈工程师 Full-Stack Developer

 

说到这里,首先要明确一点,前端开发和后端开发并不是黑与白的区别,前端工程师和后端工程师之间也没有恐怖分子和反恐精英这样子的暧昧关系。在目前的经济形势下,在这个资源紧缺的市场环境中,前端工程师往往需要学习(至少了解)一些后端开发的技能,反之亦然。产品开发有很多通用的规则,跨越了前后端的界限,于是我们开始寻找一种通才。

它的由来?

全栈工程师自然很早就存在,但是“全栈工程师”的叫法诞生于Facebook的开发部门。四年前,有一类特别的人群被挖掘出来,他们的工作内容涉及到了技术架构(技术栈)中的每一个环节,包括前端和后端,他们可以和后端工程师一样在服务器端玩弄应用程序和数据,也可以使用前端语言控制页面内容和调节用户体验,他们能够提供一套完整的系统。

总之,全栈工程师是网页开发的全能战士。

感觉很酷是吧?成为一个全栈工程师,同时精通前端和后端开发,无形之中给自己的职业生涯创造了很多机会。不过也别高兴得太早,就和烹饪一样,有人更擅长热菜,有人更擅长甜点,精通两者需要时间和经验。妈妈的手艺可不是一日炼成的,更不是简简单单的按照食谱来做就行(事实上很多工程师依然在这样错误的做着)。一个好的全栈工程师和一个好的大厨一样,需要有自己的内涵,需要有所有的烹饪原料,需要掌握所有的方法,才能奉献上一顿完美的晚餐。

 

相关技能和工具

 

全栈工程师需要掌握的技能相对复杂,甚至有些主观,因为这不仅仅只是技能相关的需求,而且随着时间的推移,人们对于他们的要求也在一点点变化。除了要根据不同项目掌握前端和后端开发的相应技能外,全栈工程师还需要充分理解网页正常运行的每一个环节,不仅包括合理的服务器配置,规范的API结构,还要通晓JavaScript的哲学,以及CSS背后的设计情怀。

举个栗子,现阶段一个典型全栈工程师的装备,HTML5/CSS3 + Scala + MongoDB + 云服务 + JavaScript

有了知识和技术,就还差经验了,这也是最后一道门槛,全栈工程师尤其需要能够在一个项目面前,快速地定义前端开发和后端开发的职责,分析各种解决方案的优势和劣势,最终选择最合理的执行方式。

 

老问题,作为用户如何感知网站背后的全栈工程师?

 

这个我真的说不出来了,自己去感受吧,页面加载需要多久,内容布局是否专业,交互体验是否自然,等等等等。

最后说一句

不要迷恋全栈工程师,任何时间,任何场合,都有一个“大而全”和“小而精”的选择,好的网站从来都不是一个人的功劳,不要忽略了设计师、摄影师、文案、产品经理、客户经理、销售、客服、用户、以及其他所有直接参与和间接参与到网页制作中的人们。识别优秀的工程师也并不一定只是技术层面的事情,无论是前端、后端还是全栈,工程师的自我修养还需要包括对细节的关注,自主学习的速度,解决问题的效率以及良好的沟通能力。

 

又该说再见了

 

如果你是个网页工程师,那么恭喜你,你现在最不需要担心的就是找到一份称心的工作,因为至少你可以来我这里,把简历扔过来吧 jobs@wedfairy.com 哈哈。事实上接下来五到十年是网页工程师最好混的时期了,HTML5终于定稿,五花八门的屏幕的出现,跨平台应用的需求越来越高,微信至少还火热着,加油啊!!!

有事没事,请关注这里 @鬼骨孖 的博客 http://blog.ukisama.com

为每一天都打上标签 — 鬼骨孖谈八音盒

肉们李在六月中的时候就提醒我要写一篇软文来介绍一下手头的Wedfairy,但其实我从来没写过那种文章,然后没多久以后“@美位网 目前为止虽然已经离职但是依然是至今做的最久的全职的商户拓展”提醒我要发一篇blog来表现的高调一点,后来我的日记应用DayOne开始每天提醒我要充实自己的生活一定要和以前一样每天记录一点文字。

 

就这样子三个月过去了……9月份发了一条朋友圈消息询问婚礼着装,居然获得了“自从开通朋友圈以来最多的留言数量”,来自世界各地有些熟悉有些不熟悉有些差点忘了名字有些一辈子也忘不了名字的人都来为我“出谋划策”,我意识到这真是一个好兆头啊。

 

9月底Wedfairy产品上线,刚刚登上CEO宝座的西北人肉们李回天水。第二天,另一个创始人西北人小钊来办公室,主要是来和我说左姑娘和默姑娘的故事,随后我发现自己从零时区到西八区的各个朋友圈终于被打通了。接下来我要为五湖四海的你们讲一下我自己的故事。

 

10月份去三番原本是为了接一个基友回来一起在上海把Wedfairy做好。我原以为自己说教的功力还没有减弱,基友笑了,他说他要十一月自己一个人回来,连自己的妈妈也不告诉。我觉得在硅谷待久了真的会变的莫名其妙,还是加入我们好。

 

到目前为止,已经打了三个广告(具体是哪三个可以在八音盒婚礼邀请函公众号里留言,答对没有任何形式的奖励)。

 

Wedfairy有一个老派又时髦的中文名字,八音盒,他还有一个修饰语,“会讲故事的婚礼邀请函”。这是继大麦盒(还记得华盛顿的那盒牛奶吗?)以后又一个出现在本博客中的产品,于是“盒子计划”已经完成了三分之二。八音盒倡导婚礼邀请函中的主角都是新郎和新娘最真实的自己,每一场婚礼背后都有数不清埋在主角心中很久的故事,所有故事汇集在一起就组成了这张独一无二的婚礼邀请函。所有使用八音盒制作婚礼邀请函的人们都在向全世界宣告一条充满正能量的信息,它看似短暂,却是永恒。它影响到的范围远远超过了新人的想象,它让人们越来越热衷于去发现生活中的美好,乐于去表达自己的快乐,与全世界每一个角落的小伙伴们一起创造一张最有创意的地图。

 

事实上现在Wedfairy的人就是这么工作的。

 

1. 离开自己的公司

Wedfairy现在的总人数是个质数,除了两个85后,其他都是兼职,他们来自上海,北京,深圳,旧金山,巴黎,新加坡,但是他们一个一个接着一个一个的离开了或者准备离开自己原来的公司。

但这不代表我们已经满员了,如果你想加入我们,请猛击这里 http://wedfairy.com (或者点击下方”查看原文“) 讲一个自己的故事,然后告诉我们。如果你在上海,很幸运你可以直接过来,沿着黄浦江游到北面,我们在杨浦大桥脚下,看着红色的桥身会有种在旧金山的错觉。如果你不在,你最好选择环保的交通工具过来,我们报销路费和住宿,以及其他服务的费用(哇哈哈~)

 

2. 每天做一件可以写进日记的事情

古人鬼骨孖有一句名言,翻译过来大概是说,人写日记,不是为了把本子填的满满的,而是为了督促自己把生活填的满满的。我觉得很有道理,于是我们大家都这么做。KickStarter上有不少项目,它们设计和产品做的很不好,但着实可以打动人,其中一个叫做 One Second Every Day,这些作者们被放大的理想就是我们拿来约束自己的底线。

无论是郁金香血洗斗牛士,还是陪着人家的女朋友吹海风,或是发现办公室突然多出来一百箱水,这些都是值得被记录的事情。

 

3. 为每一天都打上标签

我们在为别人谱写故事,就要先让自己的生活充满故事。除了每天喝水走路呼吸空气,还有什么可以督促自己把生活填充的满满的呢?

创始人用自己的故事感动了身边的人以后,又开始倒弄了。他(其实就是我啦)正在和自己的妻子执行一个神秘的计划,Count The Day

他们的一周是这样子的:

周一是 Free Day 随便做什么
周二是 Cooking Day 必须回家做饭吃
周三是 Walking Day 要出去散步
周四是 Reading Day 晚上要看书
周五是 Low Carbon Day 要坐地铁上下班
周六是 Running Day 要去跑步
周日是 Explore Day 要去任何一个以前从没去过的地方

事实上,天变冷了,他们最近并没有好好的执行。

 

4. 自己的事情自己做

Wedfairy的每一个人每天都在创造着故事。自己的事情自己做,不光是工作上的,还有生活上的。大家把责任看作是保证整个团队充满能量的必要条件,我们因此感到自己无比幸运。尤其是在我们这样扁平化管理的团队中,生活琐事的主动分担让每一个人都能真正感觉到自己工作在一个轻松快乐的环境中。

我们每天早上轮流去楼下的全家便利店带最便宜的咖啡,每天下午轮流下楼穿过庞大的广场舞团体去体验最本地化的生活。我们喜欢分享同一个批萨,也明白在绿茵场上各司其职。

事实上,一段时间以后,等到团队越来越完整了,CEO的首要职责就是每天打扫卫生了,这可以让我们的生活成本大大降低。至于拿着最低工资的CTO?他负责做每天一百万次手动点击的“猴子测试”,以及在这里发博客。

 

5. 消除一切干扰

我们一直在寻找一种方式,让自己消除干扰,提高整体的效率。回忆起曾经一边看美剧一边写程序,或者一边玩游戏一边画流程图的年代,简直是颓废到了极点。如今变专业了,我们时常展开连续的头脑风暴安排高质量的咖啡时间,这让我们快速的建立起强大的社交和学习节奏,但我们依然想方设法的让自己专注于产品制作。作为初创企业,在我们这个阶段,给自己多一些时间研究产品,给自己多一点机会和用户沟通,对我们来说弥足珍贵,当然也是最好不过的事情啦。

 

6. 保持身体健康

尽管这只是一个生活方式的话题,但保持身体健康不仅仅是工作效率的保证,也是一种对团队负责的态度。尽管有时候我们会从太阳下山奋战到太阳升起,我们也不会一直坐在椅子上盯着50cm外的屏幕,我们杜绝一切背部酸痛,颈椎麻木,眼睛疲劳,体重增加,等等等等让自己的自拍照越来越难看的隐患。

每晚的充足睡眠,每天的步行时间,每周的运动时间,做不到的,不是因为太努力,而是跟不上我们的节奏。

 

7. 别丢了自己的创作情怀

最后的最后,想了解八音盒的诞生,请关注我们上一篇微信公众号文章 >>> 寻找那遗失的创作情怀

 

有事没事,请关注这里 @鬼骨孖 的博客 http://blog.ukisama.com

2014-10-30 八音盒 WebApp V1.0 Release Notes

更加变幻莫测的十月来了,产品正式上线,不如就叫1.0版本吧

 

接下来一个月里,两个不可忽视的功能最终出现在了新产品中

1. 读者可以在祝福的时候留下自己的姓名,目前只有故事制作者可以在工具中看到留言者的姓名

2. 增加了留言审核的功能,在工具中可以把不喜欢的、过火的、毫无意义的留言隐藏

3. 添加音乐,万众期待,终于上线!

拿出你压箱底的好情歌,感动那些陌生或不陌生的情侣

 

十月中旬去旧金山转了一圈,一号公路一路向南,一个礼拜里把硅谷的朋友们见了一圈,终于,最后,在月底的时候,门飞重磅回国了,任务完成吧。

有事没事,请关注 @鬼骨孖 的博客

2014-09-30 八音盒 WebApp V0.3 Release Notes

10个月前,我写下新年第一篇博客,许下三个愿望,说今年的关键词是“变化”

拉布拉多最终没有入手,看来要等到冬天再说了。九月发生了太多的事情,急冲冲的来回北京,颗粒无收,遇到了当年孟痣门下的一位学姐,又见到了白姑娘和她的梗,心里平衡不少。中秋节回家的路上相对有趣,两个人一起回家就是好,在车上可以轮流朗读,读完了诺冬的《闻所未闻》,居然做了个足以影响八音盒所有人好多年的重大决定,随后很脑残的买来《广岛之恋》的剧本,敦促自己快些定下日本的行程。

言归正传

1. 计时器终于上线!新制作的故事中都会出现“倒计时”或者“时间流逝”

2. 所有故事底部又重新加入了 MADE WITH LOVE 字样

3. 在不少新人的要求下,发送祝福留言是可以留下姓名,但不会公开

4. DIY工具上做了好多修修补补,非常欢迎各种反馈和报错~

5. 新版主页上线!两个人用了一周时间东拼西凑的做出了一个感觉还不错的主页,像模像样的~建议在PC上浏览。。

6. 其他一些变化,肉们李得到一个新技能。

变化无常的九月终于过去了,欢迎更加变幻莫测的十月吧~国庆快乐!十一期间要见雪上阳,有些激动。

有事没事,请关注 @鬼骨孖 的博客

2014-08-31 八音盒 WebApp V0.2 Release Notes

八音盒 WebApp 经历了第一波小热潮以后,重新开始见了几位投资人,谈成了两家婚庆公司,还不错啊~我还找回了失散多日的杯子。

过去的一周团队还正式搬进了新办公室,装上了电信的宽带,锁定了一家有优质现磨咖啡的便利店,发现了一家有纯正陕西口味的面馆,好像还一起玩了一局FIFA

言归正传

1. 计时器和心愿单模块看起来没法按时推出 看来要等到一周后啦。

2. 移除了所有故事最后的尾页,统一在顶部Banner呈现八音盒的logo和名字。

3. 改良照片上传,减少了冗余的步骤,值得一试!

4. 分离注册和登录页面,解决部分用户觉得理解困难的问题。

5. 工具中主题切换页面中的每一个主题都配上形象的图,代替难以理解的色块。

6. 引导页面的每一步也配上了图。

7. 每一个故事模块制作完可以直接进入下一个模块。

8. 做完第一份宣传小册子,婚博会遇到好大的挫折,城管保安无处不在,第一次集体线下递推失败。

9. 这一周团队重新联系了种子用户,A/B测试看起来很成功。看来好多用户对于故事场景的认知以及文字的思索还有很多问题。

八月结束前,确定了第一笔资金,快乐的迎来金秋九月。

请继续期待计时功能,更方便直观的文字启发,产品介绍和全新主页也将面世!

有事没事,请关注 @鬼骨孖 的博客

2014-08-17 八音盒 WebApp V0.1 Release Notes

2014年8月9日,八音盒 WebApp 公开第一天,立即迎来了两个用户,北京中医们和天水的小伙伴们功不可没

在接下来的一周里,八音盒产品团队致力于解决了如下问题:

1. 新故事由原型故事产生,代替无图无文字的空故事

2. 相册模块可以添加、删除和替换照片

3. 全新的主页,更详细的产品介绍,更多案例,更好的留言板

4. 故事引导中,每个模块的输入顶端都加入超大的“启发”按钮

5. 可以编辑分享出去的故事标题和故事概述,目前适用于微信分享

6. 增加两个新模板 oldtimes 和 ladypink

7. 在客户端自动缩放用户上传的图片,加快上传速度,减少存储空间

8. 开场白和地址可以多行输入

9. 地图模块中可以直接使用百度地图,也可以自己上传地图

10. 在PC上打开工具和故事页面,使用 iFrame 模拟手机上打开的样式,并有手机扫描二维码提示

 

下周新功能预告:

计时和心愿单,更方便的分享功能,敬请期待!!!

 

有事没事,请关注 @鬼骨孖 的博客