囧

囧克斯

囧克斯 勾三股四

https://jiongks.name
https://jiongks.name/atom.xml (RSS订阅地址)

奔四了，写给40岁的自己

<p>年关将至，写给已经40岁的自己。</p> <p>鉴于大家在互联网上认识我大多是因为我的工作，那就先从工作聊起。</p> <p>十年时间足以改变很多事情。英国脱欧、川普从胜选到败选再到胜选、新冠、战争、C罗从皇马去了尤文又去了曼联又去了沙特、比特币从两百多美金涨到了五位数、AI 的代名词从 AlphaGo 变成了 ChatGPT。说唱、街舞、乐团、站立喜剧从小众走到了主流。高铁、外卖、电动车进入了平常百姓家。</p> <p>遥想十年前，刚过30岁的我还身处杭州，那时的自己逐渐适应了阿里的工作文化和游戏规则，工作是辛苦的，但也是充实的。</p> <p><img src="/images/posts/to-my-40s/me-2015.jpg" alt=""></p> <p>2015年的11月，也就是当年的双十一过后没几天，我代表手机淘宝前端团队连续发布了三篇《对无线电商动态化方案的思考》<a href="https://github.com/amfe/article/issues/13" target="_blank" rel="noreferrer">1</a>, <a href="https://github.com/amfe/article/issues/14" target="_blank" rel="noreferrer">2</a>, <a href="https://github.com/amfe/article/issues/15" target="_blank" rel="noreferrer">3</a>。后来，这三篇文章的内容演变成了阿里巴巴的开源项目 Weex，这也算是我个人在阿里时期最被人熟知的一件事。同期，我还加入了一个叫做 Vue.js 的开源项目，也因此结识了它的作者尤雨溪 (Evan You)，并与他保持了多年的友谊。十年后的今天，我们两家人都在新加坡生活，真是奇妙。当然比起 Vue 这么多年长足的发展，Weex 的生命周期短暂了许多，我尽力了，也学到了成长了。这也是我十年职业生涯的一部分。</p>

2025/12/31
阅读更多

有序退网

<blockquote> <p>该文章部分内容与我在<a href="https://beyondcodefm.com/" target="_blank" rel="noreferrer">《代码之外》</a>参与录制的 2024 年终总结内容有所重叠，算是一个文字版的整理。</p> </blockquote> <p>直奔主题，经过深思熟虑，我决定开始渐进式“退网”，并分享一些我在这个过程中的思考。</p> <p>首先，别误会我，互联网很好——总体上它是的。作为一个标准的从业者，它伴随我从我的第一份实习工作到现在很多年了。我可以自豪的说，我亲身经历并见证了很多互联网改变生活甚至改变世界的高光时刻，并作为参与者与有荣焉。但同时，我也逐渐觉得，自己深陷其中，到了一种过度和对自己不利的程度。</p> <p>这次的“退网”更多的是针对一些我个人觉得特别“使人上瘾的 (addictive)”部分，尤其但不仅限于互联网<em>社交媒体</em>。<a href="https://paulgraham.com/addiction.html" target="_blank" rel="noreferrer">Paul Graham 在 2010 年曾经写过一篇关于“加速成瘾”的文章</a>，其中也提到，这个世界客观上就是会变得越来越“addictive”。现在这个加速成瘾的主战场无疑就是互联网。</p> <p>当然也不要误会，把东西变得 addictive 总体上也有很多好处，只是要在正确的方向上，且不能过度。</p> <p>如果说还有什么次要的东西，那可能是把互联网<a href="https://en.wikipedia.org/wiki/Law_of_the_instrument" target="_blank" rel="noreferrer">当做锤子</a>，觉得如果通过互联网可以做那就一定要或最好通过互联网来做的事情，比如<em>社交、学习、获取知识</em>等等。我都根据个人的实际情况做了反思和调整。</p> <p>另外完全退网很难也未必真的有意义，我给自己界定了一个范围，希望可以从这个范围开始尝试。</p>

2024/12/30
阅读更多

我和 Vue.js 的十年

<blockquote> 本文是我在 VueConf 24 CN 的开场演讲稿，分享我和 Vue.js 的十年的故事。<br /> 文中截图来自我的幻灯片。另外我试着挑战了一下 <a href="https://x.com/zhaojinjiang/status/1810865403033440494" target="_blank">Paper Mario 的主题风格</a>，希望大家喜欢。<br /> <ul> <li>VueConf 24 CN 官网：<a href="https://vueconf.cn/" target="_blank" rel="noreferrer">https://vueconf.cn/</a></li> <li>在线幻灯片地址：<a href="https://jinjiang.dev/slides/my-10-years-with-vuejs/" target="_blank" rel="noreferrer">https://jinjiang.dev/slides/my-10-years-with-vuejs/</a></li> <li>演讲 B 站视频地址：<span class="break-all"><a href="https://www.bilibili.com/video/BV16W421R7ga/" target="_blank" rel="noreferrer">https://www.bilibili.com/video/BV16W421R7ga/</a></span></li> </ul> </blockquote> <p><img src="/images/posts/my-10-years-with-vuejs/cover.png" alt=""></p> <p>一转眼，Vue.js 已经十周年了，这同时也几乎是我个人参与 Vue.js、参与开源项目的十年。</p> <p>我和 Vue 缘分的开始应该是自己 2014 年在阿里内部创建的一个项目，名字如果没有记错的话叫 lib-noble。这个库算是一个 data observer 的 JavaScript 实现，后来我们管这种东西叫 reactivity API，再后来叫 signals。在我看来大同小异。写了这个库没多久，我就在 GitHub 上发现了 Vue.js，其中数据处理的相关设计和实现都跟我自己写的东西不谋而合。我当时的第一反应是，这个库比我写的好多了，而且还有很多其他功能，比如组件系统、模板编译等等。于是我就开始关注 Vue.js，并一路参与到了今天。</p> <p>在这十年里，Vue.js 本身，包括团队，都经历了很多事情。我自己所经历的故事，已经出圈且被大家熟知或调侃的，也许就是<a href="https://github.com/vuejs/vue/pull/1165" target="_blank" rel="noreferrer">自己在 Vue 的第一个 PR</a> (只改了两个空格)、维护<a href="https://cn.vuejs.org/" target="_blank" rel="noreferrer">中文官网</a> (今年愚人节我们玩了个“威优易”的彩蛋)、创建了开源项目 Weex 并<a href="https://weibo.com/1761511274/E6xOf5Q9B" target="_blank" rel="noreferrer">和 Vue 有一段时间的双向官方合作</a>、以及在 <a href="https://youtu.be/OrxmtDw4pVI?feature=shared&amp;t=1546" target="_blank" rel="noreferrer">Vue 的纪录片</a>中出镜等等。相关的内容不打算赘述了。这次我主要想分享几则背后发生在 Vue 和我自己身上的小故事。尽可能还原一个更加立体的历经 10 年的开源项目。</p>

2024/7/11
阅读更多

我参与《代码之外 Beyond Code》的故事

<p>关注我的人可能已经知道我最近作为常驻嘉宾加入了一个叫做《代码之外 Beyond Code》的播客节目。</p> <p><img src="/images/posts/beyond-code-fm/beyond-code-fm-logo.png" alt="代码之外 logo"></p> <ul> <li><a href="https://beyondcodefm.com/" target="_blank" rel="noreferrer">官网</a></li> <li><a href="https://podcasts.apple.com/sg/podcast/%E4%BB%A3%E7%A0%81%E4%B9%8B%E5%A4%96-beyond-code/id1688972924" target="_blank" rel="noreferrer">Apple Podcasts</a></li> <li><a href="https://www.xiaoyuzhoufm.com/podcast/6194d973c14c9a0db82de1ea" target="_blank" rel="noreferrer">小宇宙</a></li> <li><a href="https://space.bilibili.com/3494350879198031" target="_blank" rel="noreferrer">Bilibili</a> (视频版)</li> <li><a href="https://www.youtube.com/@BeyondCodeFM" target="_blank" rel="noreferrer">YouTube</a> (视频版)</li> </ul> <p>这里简单分享一些我参与《代码之外》的故事：</p>

2024/3/26
阅读更多

博客站迁移至 VitePress 的备忘

<p>水一篇。这周集中把博客由 <a href="https://hexo.io/" target="_blank" rel="noreferrer">Hexo</a> 迁移到了 <a href="https://vitepress.dev/" target="_blank" rel="noreferrer">VitePress</a>，顺便把主题也换了。简单记录一下迁移过程。</p> <div style="display: flex; align-items: center; justify-content: center;"> <img src="/images/posts/migrate-my-blog-to-vitepress/light-mode.png" style="width: 40%;" /> <img src="/images/posts/migrate-my-blog-to-vitepress/dark-mode.png" style="width: 40%;" /> </div>

2023/8/5
阅读更多

写给我的奶奶

<p>(本文写于 2022 年 11 月)</p> <p>大约一周之前，我突然接到父母亲的消息，说九十多岁高龄的奶奶身体突然变得非常不好，感觉很难坚持了，虽然立刻飞回去不太现实，但还是希望可以安排个远程视频，见一面。</p> <p>我非常清楚这意味着什么，这一面就是最后一面了。</p> <p>隔天早上，我们安排了视频见面。我们上一次见面也是视频见面，当时我们还能相互交谈个几句。这一次，奶奶的身体靠在家人身旁勉强可以坐起来，除了睁大眼睛看着屏幕对面的我，已经动弹不得，也说不出话了。我不确定她还能不能听到我说话，总之我努力说了很多。那一刻，自己心里特别难受——一是不愿看到这一幕，二是悔自己没有办法来得及回去亲自看看或身体力行帮着做点什么。</p> <p>除了伤感，我决定写一点关于我奶奶的东西，让更多人认识和记住她。</p>

2022/11/26
阅读更多

中文格式化小工具 zhlint 及其开发心得

<p>介绍要给小工具给大家：<strong><a href="https://github.com/Jinjiang/zhlint" target="_blank" rel="noreferrer">zhlint</a></strong></p> <p><img src="https://raw.githubusercontent.com/Jinjiang/zhlint/master/docs/logo.svg" alt="zhlint logo"></p> <p>这个工具可以帮助你快速格式化中文或中英混排的文本。比如常见的中英文之间要不要用空格、标点符号要用全角字符之类的。</p> <p>看上去这工具似乎和自己的工作和职业关系不大，但其实也是有一定由来的。</p>

2020/4/26
阅读更多

vue-mark-display：用 markdown 语法轻松撰写幻灯片

<p>为大家介绍一个刚刚开源，但其实自己已经使用超过 5 年的小工具：<code>vue-mark-display</code>。你可以用它把 <a href="https://commonmark.org/help/" target="_blank" rel="noreferrer">markdown</a> 格式的文本转换成幻灯片并在浏览器中播放和控制。</p> <h3 id="开发背景" tabindex="-1">开发背景 <a class="header-anchor" href="#开发背景" aria-label="Permalink to &quot;开发背景&quot;">&ZeroWidthSpace;</a></h3> <p>我自己工作中经常需要准备各式各样的幻灯片，所以逐渐觉得用 PowerPoint 或 Keynote 来做幻灯演示略微显得有些笨重。这体现在板式和样式设计、文件大小、打开、编辑和播放的方式等很多方面。加上我从事的就是前端开发的工作，对语义化的信息格式非常敏感，深刻的认为，那些你表面上想编辑的“样式”其实是信息的“类型”+“配套的样式”罢了。所以决定用 markdown 外加自己扩展的一些小功能，来撰写幻灯片，并研发了相应的工具，也就是最近开源的 <code>vue-mark-display</code>。</p> <p>最早这个工具是用 vue v0.10 写的，当时源代码里还有像 <code>v-attr</code>, <code>v-repeat</code>, <code>v-transition</code> 这样的“古董级”语法，而且还在依赖 Zepto。最近准备开源这个项目的时候，我也基于最新的前端知识和技能进行了重构。所以大家看到的是比较新的版本。</p> <p>其实在此之前，我也写过很多类似的小工具了，但都没有坚持使用很久，这次开源的 <code>vue-mark-display</code> 我差不多持续使用了 5 年。经历了差不多这 5 年时间，准备过了无数的幻灯片和公开演讲，我想说基于 markdown 以及这些小功能撰写幻灯片真的很酷。如果你也有兴趣试一试用 markdown 为主体来撰写自己的幻灯片，那么不妨了解并体验一下 <code>vue-mark-display</code>。</p> <p><strong>另外，事实上，如果只是想使用它，你是不需要学习任何关于 Vue 的知识的</strong> —— <strong>文章最后会提供一个不需要 Vue 知识的开箱即用的办法</strong> —— 所以它也对 React、Angular 等社区的同学友好 —— 只要你会写 markdown 和简单的 HTML5 代码，你就可以使用 <code>vue-mark-display</code> 制作出非常精美的幻灯片。</p>

2019/4/4
阅读更多

我对技术会议的一些看法

<p>如题，今年陆续参加了一些技术会议，有些新的感触，尤其是今年第一次尝试多参加了一些境外的会议，有在 <a href="https://www.webconf.asia" target="_blank" rel="noreferrer">HK</a> 的，有在 <a href="https://modernweb.tw/2018/" target="_blank" rel="noreferrer">TW</a> 的，有在 <a href="https://vuefes.jp" target="_blank" rel="noreferrer">JP</a> 的，感受很不一样，当然也参加了年初的厦门 CSSConfCN 和刚结束的 VueConfCN。另外网上越来越多人在讨论或是质疑参加技术会议到底有什么意义、好的技术会议应该是什么样子的，我也以写这篇博客的方式参与一下。</p>

2018/12/7
阅读更多

VueConf Hangzhou 见闻

<p><del>先说</del>分享一些自己参加 <a href="https://vueconf.cn/" target="_blank" rel="noreferrer">VueConf Hangzhou</a> 的流水账见闻。</p> <p><img src="/images/vueconf-hangzhou.jpg" alt=""></p>

2018/12/5
阅读更多

第四届 CSSConf CN 见闻

<p>上周末作为一名分享者参加了 <a href="https://css.w3ctech.com/" target="_blank" rel="noreferrer">CSSConf CN</a>，在厦门。</p> <p>其实除了自己的分享内容，这次我是带着很明确的目的参会的，因为有两个主题我特别关注，就是：</p> <ul> <li>第一个：响应式的组件</li> <li>第三个：从 API 的角度看组件的 CSS</li> </ul> <p>(两个分享的标题都被我稍微“演绎”了一下)</p> <p>这两件事都是自己工作上正在特别关注的事情，一方面，我们很少从 API 的角度去理解一个组件的 CSS 该如何组织和管理，所以这个标题就特别吸引我，另一方面响应式组件的分享者是来自新加坡的前端工程师 Zell (我个人一直觉得国内的响应式都是在瞎搞，看了很多周围团队都没有认真做这件事，甚至不相信响应式的价值，从设计师到工程师)，因此非常珍惜这个机会能近距离学习一些国外的同行们是怎么看待和实践响应式的。</p> <p>所以尽管我们团队的差旅经费已经用完了，还是决定自费来厦门近距离交流一下。</p> <p>现在证明这次真的不虚此行。</p> <p>当然参加这种线下活动，“面基”的目的是一定有的……恩，这个不值一提。</p>

2018/4/3
阅读更多

[译]Web 表单的未来

<p><mark>译自：<a href="https://blog.prototypr.io/the-future-of-web-forms-4578485e1461" target="_blank" rel="noreferrer">https://blog.prototypr.io/the-future-of-web-forms-4578485e1461</a> Matt West 的 The Future of Web Forms</mark></p> <p>license: <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noreferrer">CC BY-SA 4.0</a></p> <hr /> <p>如何通过会话式的界面让数据收集更加人性化。</p> <p>Web 表单是从纸质媒介进化而来的。即设计一组标签和线框来限制输入，同时让数据处理变得跟容易。</p> <p>毕竟，表单的目的是收集数据，以便执行操作。为了执行该操作，我们需要把收集的数据统一汇总。我们在界面上设计了一些约束以便达到统一汇总的目的。表单旨在符合流程上的需求，而非用户本身。</p> <p>表单经常给人的感觉是冷冰冰的，没有人情味。因此，我们得到的回应往往也是冷酷和不人性的。我们不深入细节，如果一个朋友问你相同的问题，你可能会多一些回复，但这是一台电脑。他想要的只是数据，别的不在乎。就好像你在跟人说话但是人家并没有在听。为什么没人听的话说出来会让人觉得烦呢？</p> <p><img src="/uploads/2017/08/3710637212.jpg" alt=""> Image by <a href="https://www.flickr.com/photos/teegardin/5512347305/in/photolist-9p7dNM-nfdbBe-cDphCL-9xSJ1E-4ygMXx-6jXLSo-9oAgas-nytcFV-aXPWKv-2rxaS-6jXZNW-oTkWEk-iYYsDH-pMeotq-5SLAGV-6jERwK-6jBcih-iq2oUj-9c36uA-6wAbW4-7vWrZv-dRsLkh-99N1pk-g1vCAm-g4P8w-eSo6V4-biaFTP-6jk9td-J9DyZ-cQay4s-6jXYcS-9PSLHY-iYKUVr-h5Eh26-6jBXaA-7vTL6V-pMfC4t-5u8Nod-7b3sfu-fdPdkW-7vVobi-5Tscj8-7vUV6p-bDw2PE-6jxKBi-5Tww8J-89GCkF-6jxKTi-6jBWUG-eiwixk" target="_blank" rel="noreferrer">Ken Teegardin</a>.</p> <p>和许多数字化的东西一样，表单已经被之前的形态严重影响。我们之所以往线框里填东西是因为我们以前在纸上就是这么画的。</p>

2017/8/4
阅读更多

[译]苹果正在做一些他们的程序员明摆着不想要的东西

<p><mark>译自: <a href="https://medium.com/make-better-software/apple-is-about-to-do-something-their-programmers-definitely-dont-want-fc19f5f4487" target="_blank" rel="noreferrer">https://medium.com/make-better-software/apple-is-about-to-do-something-their-programmers-definitely-dont-want-fc19f5f4487</a></mark></p> <p>Jul 29, 2017</p> <p>作者 <a href="http://anildash.com/" target="_blank" rel="noreferrer">Anil Dash</a> 是 Fog Creek Software 的 CEO，致力于让科技变得更人性和道德一些，同时他也是 Medium 的顾问。</p> <hr /> <blockquote> <p>苹果在 Apple Park 这个漂亮的新办公楼上花了 50 亿美金，却犯了一个完全可以避免的极其昂贵的错误：让他们的程序员工作在一个开放式的格局中。这真让人惊讶。</p> </blockquote> <p><img src="/uploads/2017/08/2254787802.jpg" alt=""></p> <p>我在 Fog Creek Software 工作，我们的联合创始人兼前 CEO <a href="https://medium.com/u/869c7e626b83" target="_blank" rel="noreferrer">Joel Spolsky</a> 在<a href="https://www.joelonsoftware.com/2000/04/19/where-do-these-people-get-their-unoriginal-ideas/" target="_blank" rel="noreferrer">至少 17 年前</a>就已经针对开放式办公室对于程序员产能的糟糕影响撰文了。他在这方面的洞察基于了 Tom DeMarco 和 Tim Lister 的经典书籍<a href="https://en.wikipedia.org/wiki/Peopleware:_Productive_Projects_and_Teams" target="_blank" rel="noreferrer">《Peopleware》</a>——该书已经出版了三十年。所以这其实不是什么全新的观点。当然在这数十年里，也已经有无数的<a href="http://theconversation.com/open-plan-offices-attract-highest-levels-of-worker-dissatisfaction-study-18246" target="_blank" rel="noreferrer">学术研究确认</a>了同一个结论：人们在开放式空间办公是烦躁的、注意力不集中的、常常不开心的。</p> <p>这不是说开放式办公环境一无是处——它能够营造很好的协作和联络的氛围。对于市场或销售团队来说，共享空间是非常有意义的。但是对于需要身处某种工作流状态的任务来说呢？这个问题从科学的角度是有定论的。</p> <p>那就是把门关上。</p>

2017/8/1
阅读更多

[译]为什么我不会无偿加班且你也不应该

<p><mark>译自：<span class="break-all"><a href="http://thecodist.com/article/why_i_don_39_t_do_unpaid_overtime_and_neither_should_you" target="_blank" rel="noreferrer">http://thecodist.com/article/why_i_don_39_t_do_unpaid_overtime_and_neither_should_you</a></span></mark></p> <p>原文写于 2012 年，至今已经有一段时间了，前段时间这篇文章又被大家翻出来热烈讨论，看过之后有些感触，所以翻译了一下</p> <hr /> <p>我是一个在美国待了 30 年的程序员，我有过一周工作超过 40 小时的经历，这在行业里面并不常见，但是我[很难][rarely]因此而得到更多的薪水。</p> <p>总之，我现在发现整个做法[很恶心][nauseating]。</p> <p>我并不是针对自营或创业等多干活儿就能得到更多回报的情况。我曾经在 80 年代中期到 90 年代开过两个小的软件公司，并且工作时间也很长，但是我们会共享全部的成果，而第二家公司我们在合同里就定好了多劳多得的规矩。当然这不是我们今天讨论的重点。</p> <p>如果我为一家大公司工作并且谈好了薪水，那我的预期就是我在标准的时间内，即公认的 (至少在美国) 一天 8 小时一周 5 天，尽我所能完成工作。如果他们希望我每周工作 70 个小时或有些主管期望团队每天都来上班，现在的我是会拒绝的。为什么呢？</p> <p>当我们决定工作赚钱的时候，我们假定工作的主要原因是为了换取我们生活所需的开销。雇员的预期是他们会获得等价于这笔薪水的产出。但问题在于，雇主概念中的价值经常和雇员的不一样，尤其在美国和亚洲。许多公司期望薪水是固定的，但是他们创造这些价值需要完成的工作是不确定的。雇主觉得只要提高对雇员的预期和要求，就能够获得更大的回报，这样他们就可以通过为每份薪水延长工作时间来降低实质的劳动成本。</p> <p>这对于雇员来说意味着什么？如果你同意了，那么你实际上就认同了自己的工作更廉价。甚至这种工作其实就是无偿的。那么作为雇员你在这样的无偿工作中收获了什么呢？在绝大多数雇主面前，你什么也没有得到。如果你是一个主管，也许会得到晋升，但是作为程序员你职业发展的道路不只是做管理这一条。如果你连续几个月每周编码超过 80 个小时，通常情况下得到的回报和一周努力工作 40 小时差不多。</p>

2017/4/1
阅读更多

寄语应届生：走出校园的几个人生转变

<p>最近收到个邀请，<a href="https://weibo.com/2724465062/ECaVuAyZk" target="_blank" rel="noreferrer">有机会和大学生的在线互动交流</a>，体裁不限。我选了上面这个题目，整理了一些心得感想，虽然活动很快就结束了，但是这些想法我打算还是以文字形式备忘一下。如果能给更多人帮助或参考，我会倍感欣慰。</p> <h3 id="目标的转变" tabindex="-1">目标的转变 <a class="header-anchor" href="#目标的转变" aria-label="Permalink to &quot;目标的转变&quot;">&ZeroWidthSpace;</a></h3> <p>作为学生，毫无疑问是以学业为重。在校园里，大家不出意外都会把学习定为最大的目标，围着功课转。但是工作之后，你可能面对很多事情要处理，怎么有所成就？怎么赚钱？怎么照顾好自己？怎么照顾好家庭……除了目标本身不同之外，我觉得更大的不一样在于，在相当长且连续的学生生涯中，我们没有太多选择的余地和必要，即便是有什么目标，也基本上是被动接受或被灌输的。但是走出校园之后，你面对的是一个无比自由开放的社会。这个时候你需要的不是意见，而是主见。甚至你是否做好了准备，有了足够的本事从事一项工作，还是继续学习深造修炼自我，直到自己准备好为止再工作？这也需要你的主见 (并为这个主见承担相应的后果，某种角度上)。最终很多选择是开放的，权衡的，遵从自己内心的结果。</p> <p>还有一点我想说的是，因为你拥有了新的目标，而且不再会有人逼着你学习，从外部给你学习上的压力，所以客观上学习的环境也没有那么好那么纯粹了，学习这件事情会逐渐变得让你渴望、珍惜、喜欢。希望你还没有因为繁重的学业对新事物新知识，尤其是表面上枯燥但实际上对你有很多帮助的东西，失去动力。我们在校园里更多的是学习知识，然后推导这些知识可以用在什么地方；走出校园之后更多的需要思考，我遇到一个问题想解决它，究竟有多少知识哪些知识可以为我所用？也许在未来的某一天你会突然觉得，当时在校园里，学习环境那么好，怎么没有多看两本书，多做些训练。所以最好不要丢下自己看书学习的习惯，给自己定个长期的学习计划，有空就多看两本书。</p> <h3 id="学会社交" tabindex="-1">学会社交 <a class="header-anchor" href="#学会社交" aria-label="Permalink to &quot;学会社交&quot;">&ZeroWidthSpace;</a></h3> <p>坦白地讲我觉得这在校园里并不是必备的技能。但是走出校园之后，它非常非常重要。这也是为什么几乎所有的公司都会给员工做沟通培训 (尽管那并不一定管用)。社交并不只是沟通而已，也不只是表达，更是聆听，是待人接物的每一个细节。我发现很多人在工作中，最简单的两件事情做不好，也不知道该怎么做，那就是：1 如何写邮件、2 如何开会。这表面上是职场礼数的范畴，也有很多文章介绍这些职场礼数，看上去就是个知识点罢了。但实际上一个人在理解和实践它的背后，反映的是修养，甚至是教养。这不是一两篇文章能够教会你的，是你平时为人处事方式的积累和感悟。</p> <p>另外社交能力的重要性不止体现在工作中，体现在你步入社会之后可能会面对的各种场合的各种人，比如和同事下班之后一起组织些活动放松消遣一下，和老乡或老同学叙叙旧——这些也都是我刚毕业的时候经常会做的事情。但是这里我认为更重要的场景是：学会如何跟陌生人打交道，如何更主动的和陌生人交流，和这个社会交流。从最简单的跟陌生人问路、跟陌生的房东租房子、甚至搭讪对吧 ^_^，到跟不同性格的服务员、乘务员、售票员、公交车司机、出租车司机沟通或寻求帮助，再到你如何主动但又不会让对方和周围人尴尬的帮助别人，包括你是否会本能的路见不平挺身而出……抱歉这可能有点超出社交这个话题了。但这些都是有关联的不是吗？每个人在这个社会中都是一个独立的个体，但又是相互依赖相互依靠的一个集体社会。想真正融入这个社会，我觉得这些都是必须的。</p> <p>最后，关于社交，还有一点很重要，就是在你刚刚加入一个公司或团队的时候，你周围的人一开始对你来说都是陌生人。这个社会上可能有很多适合你的机会，但它们不会主动找到你头上，这个时候需要你学会跟陌生人打交道。好的社交能力会让你的人生更有安全感，对自己办好一件事更有信心。和别人交流同样是一个完善自我认知的过程，尝试接受更多不同的观点，发现并理解不同的看问题的角度，有助于更认清自己，避免自以为是 (相信我，这种事情别人帮不上忙的，只能你自己领悟)。</p> <h3 id="个人发展" tabindex="-1">个人发展 <a class="header-anchor" href="#个人发展" aria-label="Permalink to &quot;个人发展&quot;">&ZeroWidthSpace;</a></h3> <p>我觉得找工作这件事情，更多的要从兴趣出发，而不是所谓的“前途”。我逐渐越来越认同和相信一句老话：“三百六十行，行行出状元”。首先，如果对这件事情没有兴趣，你很难“用心”做好它，这样的状态也不是长久的；第二，我们已经看得见摸得着的“前途”和“机会”，往往已经不是什么好机会了，尤其是如今互联网时代事情变化发展这么快。而且那些真正抓住机会的人往往都是在完全没人看好的时候就开始全身心的投入在这个行业或方向上，才能在“机会”来临的时候抓住它，我不觉得这些人只是更厉害的“投机主义者”，如果没有兴趣在背后趋势着这些人，他们又是怎样才能在枯燥 (往往还伴随着高风险和不确定性) 的领域里这么坚定的做到今天呢？所以我的个人建议是，找工作，就完全追随自己的兴趣和内心就好了，不要想太多“这个行业比较赚钱比较有前途”之类的——它最多是你的一个参考项。找到自己的兴趣所在，相信它，相信自己，保持专注，一定有最好的回报，剩下的东西交给运(时)气(间)就好了。</p> <p>再有就是要相信专业的力量，对学问保有“敬畏之心”。这里的学问不只是纯职业技术，也包括做事方式方法等等一切社科类的研究。<!--虽然我们看到今天很多行业存在这样一种不健康的现象：做 X 不赚钱，然后免费做 X 出了名，靠走穴之类的“不专注”来赚钱；再接下来大家发现 X 方面不专业也没关系，只要“出了名”，后面的“商演走穴赚钱”也行得通，而“出名”的方法又有很多，所以渐渐的没有人相信专业 X 的价值。我不知道这个 X 换成音乐、演技、技术之类的名次是不是都适用，但是这种成功只是少数个体的成功，而且是很短暂的，更重要的是这并不是一个行业和社会的成功。-->如果一个行业的专业性丢掉了，整个行业也就被毁掉了，最后大家会一起丢掉工作，一起失败。</p> <p>这种东西我觉得跟很多已经被一份工作或长期不良型的环境所固化思想的“老家伙”们讲已经不一定有意义和效果了。但是对于打算或刚刚从校园步入社会，有理想，有抱负，承载着社会的未来的大学生们来说，我希望有机会在这方面多呼吁一下。尊重和相信专业的力量，耐得住性子，不要被一时的挫折、不走运或委屈左右，多多磨练自己，你一定不会后悔。</p> <h3 id="so-are-you-ready" tabindex="-1">So Are You Ready？ <a class="header-anchor" href="#so-are-you-ready" aria-label="Permalink to &quot;So Are You Ready？&quot;">&ZeroWidthSpace;</a></h3> <p>：）</p>

2017/3/30
阅读更多

[译]如果管理是唯一可走的路，那就完蛋了

<p><mark>译自：<a href="https://moz.com/rand/if-management-is-the-only-way-up-were-all-fd/" target="_blank" rel="noreferrer">https://moz.com/rand/if-management-is-the-only-way-up-were-all-fd/</a></mark></p> <p>注：作者 Rand 是 Moz 的 CEO，文中反复出现两个词：IC (Individual Contributor) 和 PW (People Wrangler)，分别翻译成了一线员工和经理人。</p> <hr /> <p><a href="http://everywhereist.com/" target="_blank" rel="noreferrer">Geraldine</a> 很喜欢她曾经在 Cranium 的工作 (西雅图的[桌游][board game]初创公司，在 Hasbro 收购他们并[裁员][layoffs][之前][prior])。她为桌游撰写问题，并为包装盒和营销材料撰写[文案][copy]。她很擅长这个。但是发生了一些奇怪的事情——他们想让她晋升。我记得她晚上回家后[非常的][endlessly][苦恼][fretting]。她不想让人们向她汇报。她不想在团队中拥有更大的责任。她只想写写东西。</p> <p>这很奇怪。当我们审视一家公司的结构时，很容易发现团队需要很多高质量的一线员工 (IC) 以及少数高质量的[经理人][wranglers]。然而我们的[公司][corporate]文化和这个世界的“模式”已经让我觉得除非你要带人，否则你的影响力、薪水、利益、职位和自我价值都不会增长。</p> <p>[这都什么乱七八糟的。][im calling bs]</p> <p>我过去写过关于多样化成长轨迹的重要性——<a href="https://moz.com/rand/whats-the-right-team-structure/" target="_blank" rel="noreferrer">一线员工和经理人</a>——但是我们最近在 Moz 花了大量的时间碰撞想法，很快会实施一个新的职位/团队的结构，最终付诸实践，我对此充满期待。</p> <p>现在我会为一个在其工作岗位上做的很优秀的一线员工表达对管理的兴趣而担心。我担心这种渴望的很[重要的][significant][一部分][portion]不源自真正的管理责任感，而是因为他们想要在职业生涯和/或影响力上得到提高，并且认为这是唯一的办法。</p> <p>我画了这张图来辅助[说明][illustrate]两种角色之间的不同：</p> <p><img src="https://images.sparktoro.com/blog/wp-content/uploads/2017/10/ics-vs-pws-small.gif" alt="ics-vs-pws-small"><br> (<a href="https://images.sparktoro.com/blog/wp-content/uploads/2017/10/ics-vs-pws-large.gif" target="_blank" rel="noreferrer">大图</a>)</p>

2017/3/28
阅读更多

[译]如何撰写 Git 提交信息

<p><mark>译自：<a href="https://chris.beams.io/posts/git-commit/" target="_blank" rel="noreferrer">https://chris.beams.io/posts/git-commit/</a></mark></p> <hr /> <p><img src="https://imgs.xkcd.com/comics/git_commit.png" alt=""></p> <h3 id="介绍-为什么好的提交信息非常重要" tabindex="-1">介绍：为什么好的提交信息非常重要 <a class="header-anchor" href="#介绍-为什么好的提交信息非常重要" aria-label="Permalink to &quot;介绍：为什么好的提交信息非常重要&quot;">&ZeroWidthSpace;</a></h3> <p>如果你浏览任何 Git 仓库的日志，你可能会发现那些提交信息多少有些[混乱][mess]。比如，看看这些我早年提交给 Spring 的<a href="https://github.com/spring-projects/spring-framework/commits/e5f4b49?author=cbeams" target="_blank" rel="noreferrer">精品</a>：</p> <pre><code>$ git log --oneline -5 --author cbeams --before &quot;Fri Mar 26 2009&quot; e5f4b49 Re-adding ConfigurationPostProcessorTests after its brief removal in r814. @Ignore-ing the testCglibClassesAreLoadedJustInTimeForEnhancement() method as it turns out this was one of the culprits in the recent build breakage. The classloader hacking causes subtle downstream effects, breaking unrelated tests. The test method is still useful, but should only be run on a manual basis to ensure CGLIB is not prematurely classloaded, and should not be run as part of the automated build. 2db0f12 fixed two build-breaking issues: + reverted ClassMetadataReadingVisitor to revision 794 + eliminated ConfigurationPostProcessorTests until further investigation determines why it causes downstream tests to fail (such as the seemingly unrelated ClassPathXmlApplicationContextTests) 147709f Tweaks to package-info.java files 22b25e0 Consolidated Util and MutableAnnotationUtils classes into existing AsmUtils 7f96f57 polishing </code></pre> <p>[呀][Yikes]，比较一下这个仓库<a href="https://github.com/spring-projects/spring-framework/commits/5ba3db?author=philwebb" target="_blank" rel="noreferrer">最近的提交</a>：</p> <pre><code>$ git log --oneline -5 --author pwebb --before &quot;Sat Aug 30 2014&quot; 5ba3db6 Fix failing CompositePropertySourceTests 84564a0 Rework @PropertySource early parsing logic e142fd1 Add tests for ImportSelector meta-data 887815f Update docbook dependency and generate epub ac8326d Polish mockito usage </code></pre> <p>你更喜欢读哪个呢？</p>

2017/3/20
阅读更多

[译]C 程序的原则

<p><mark>译自：<a href="https://drewdevault.com/2017/03/15/How-I-learned-to-stop-worrying-and-love-C.html" target="_blank" rel="noreferrer">Principles for C programming</a></mark></p> <p>按照 Doug Gwyn 的话说：“Unix 不会阻止你做愚蠢的事情，因为那会同样阻止你做聪明的事情”。C 是一个非常强大的工具，但使用它的时候需要非常小心和[自律][discipline]。学习这些纪律是绝对值得的，因为 C 是所有程序语言中最优秀的。一个自律的 C 程序员将会……</p>

2017/3/19
阅读更多

Vue 2.0 来了！

<p>终于发布了！</p> <p>原文：<a href="https://medium.com/the-vue-point/vue-2-0-is-here-ef1f26acf4b8#.6r9xjmu6x" target="_blank" rel="noreferrer">https://medium.com/the-vue-point/vue-2-0-is-here-ef1f26acf4b8#.6r9xjmu6x</a></p> <p>今天我非常兴奋的官宣 Vue.js 2.0 的发布：Ghost in the Shell。历经 8 个 alpha 版本、8 个 beta 版本和 8 个 rc 版本 (矮油好巧！)，Vue.js 2.0 已经为生产环境准备好了！我们的官方教程 <a href="https://vuejs.org/guide/" target="_blank" rel="noreferrer">vuejs.org/guide</a> 也已经全面更新。</p> <p>2.0 的工作自今年 4 月启动以来，<a href="https://github.com/orgs/vuejs/people" target="_blank" rel="noreferrer">核心团队</a>为 API 设计、bugfix、文档、类型声明做出了很重要的贡献，社区中的同学们也反馈了很多有价值的 API 建议——在此为每一位参与者致以大大的感谢！</p>

2016/10/1
阅读更多

Weex 近 4 个月的开源之路

<p><mark>本文早些时候发表在 weexteam 的博客 <a href="https://github.com/weexteam/article/issues/73" target="_blank" rel="noreferrer">https://github.com/weexteam/article/issues/73</a></mark></p> <p>仅从我个人角度跟大家分享一下自己参与 Weex 开源这几个月以来的感受，中间可能会有写观点是偏颇的或者片面的，希望大家指正，另外不论怎样，这些都是我心里真实的想法和感受。</p> <p><a href="https://camo.githubusercontent.com/d0c177d907349f637ff7128ff4cf3ca51ec892da/687474703a2f2f696d67312e746263646e2e636e2f4c312f3436312f312f63643261353863303665336637363332386239623930666432383932623233386631646665326466" target="_blank" rel="noreferrer"><img src="https://camo.githubusercontent.com/d0c177d907349f637ff7128ff4cf3ca51ec892da/687474703a2f2f696d67312e746263646e2e636e2f4c312f3436312f312f63643261353863303665336637363332386239623930666432383932623233386631646665326466" alt=""></a></p>

2016/9/4
阅读更多

Weex 在 JS Runtime 内的多实例管理

<p><mark>本文早些时候发表在 weexteam 的博客 <a href="https://github.com/weexteam/article/issues/71" target="_blank" rel="noreferrer">https://github.com/weexteam/article/issues/71</a></mark></p> <p>Weex 的技术架构和传统的客户端渲染机制相比有一个显著的差别，就是引入了 JavaScript，通过 JS Runtime 完成一些动态性的运算，再把运算结果和外界进行通信，完成界面渲染等相关操作指令。而客户端面对多个甚至可能同时共存的 Weex 页面时，并没有为每个 Weex 页面提供各自独立的 JS Runtime，相反我们只有一个 JS Runtime，这意味着所有的 Weex 页面共享同一份 JS Runtime，共用全局环境、变量、内存、和外界通信的接口等等。这篇文章会循序渐进的介绍 Weex JS Runtime 这部分的内容，大概的章节设计是这样的：</p> <ol> <li>为什么需要多实例</li> <li>多实例管理面临的挑战</li> <li>解决问题的思路</li> <li>几个特殊处理的地方</li> <li>总结</li> </ol>

2016/8/31
阅读更多

我理解的 SPA

<p>如题，SPA (Single Page Application - 单页应用) 这个话题已经在 Weex 社区讨论了有一段时间，在传统的前端开发领域中大家也在长期探讨这个话题。这里谈谈我个人的理解和看法。</p> <h3 id="spa-的背景" tabindex="-1">SPA 的背景 <a class="header-anchor" href="#spa-的背景" aria-label="Permalink to &quot;SPA 的背景&quot;">&ZeroWidthSpace;</a></h3> <p>SPA 往往和 Router、页面间通信、页面间数据共享这些词汇联系在一起，不少同学直接问到这些词汇，实际上都是以 SPA 为前提的，因为脱离 SPA 的概念，这些词汇将失去它原有的意义，或者变成了完全不同的东西。</p> <p>那 SPA 不是理所当然、天经地义、不容挑战的吗？干嘛要脱离 SPA 的概念讨论这些问题？</p> <p>我觉得不是</p> <p>SPA 背后的命题是如何管理复杂的页面关系，最终构成一个产品的整体。传统的页面之间是通过简单粗暴的“页面跳转”和“浏览器前进/后退”建立联系的，SPA 提出的观念是在浏览器中模拟页面的跳转、切换和前进/后退，相关的很多周边命题也随之而生。</p> <p>(其实你不觉得这也是个&quot;全家桶&quot;么……)</p> <p>所以我们先把问题回归到如何管理复杂的页面关系</p>

2016/8/27
阅读更多

我理解的 Flux 架构

<p><mark>本文早些时候发表在 云栖社区 <a href="https://yq.aliyun.com/articles/59357" target="_blank" rel="noreferrer">https://yq.aliyun.com/articles/59357</a></mark></p> <p>之前 review 业务代码的时候就一直想说写一篇自己对 Flux 的理解和看法，不知不觉也过去蛮久了，于是这周末打起精神写了这么一篇。</p> <p>这篇文章将谈一些我对 Flux 的理解和个人看法。如果您还不太了解什么是 Flux，请先移步<a href="http://facebook.github.io/flux/docs/overview.html" target="_blank" rel="noreferrer">这里</a>。</p> <p>另外文中没有特别大段的代码，以讨论架构设计和背后的道理为主，可能会显得有点枯燥，大家可以选个不太困的时候耐心读读看：）</p> <h3 id="flux-中的几个基本概念" tabindex="-1">Flux 中的几个基本概念 <a class="header-anchor" href="#flux-中的几个基本概念" aria-label="Permalink to &quot;Flux 中的几个基本概念&quot;">&ZeroWidthSpace;</a></h3> <p>这是 Flux 官方提供的一张说明图：</p> <p><img src="https://facebook.github.io/flux/img/overview/flux-simple-f8-diagram-with-client-action-1300w.png" alt=""></p> <p>图中有四个名词：</p> <ul> <li>View</li> <li>Store</li> <li>Action</li> <li>Dispatcher</li> </ul> <p>下面逐个以我的角度做个讲解：</p>

2016/8/23
阅读更多

【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新

<p>主要内容来自 <a href="https://github.com/vuejs/vue/releases" target="_blank" rel="noreferrer">https://github.com/vuejs/vue/releases</a></p> <p>之前 <a href="https://jiongks.name/blog/announcing-vue-2/" target="_blank" rel="noreferrer">Vue 2.0 发布技术预览版</a> 到现在差不多三个月了，之前写过一篇简单的 <a href="https://jiongks.name/blog/code-review-for-vue-next/" target="_blank" rel="noreferrer">code review</a>，如今三个月过去了，Vue 2.0 在这个<a href="https://jiongks.name/blog/a-big-map-to-intro-vue-next/" target="_blank" rel="noreferrer">基础</a>之上又带来了不少更新，这里汇总 beta 以来 (最新的版本是 beta 4) 的主要更新，大家随意学习感受一下</p> <h3 id="alpha-和-beta-版本的侧重点会有所不同" tabindex="-1">alpha 和 beta 版本的侧重点会有所不同 <a class="header-anchor" href="#alpha-和-beta-版本的侧重点会有所不同" aria-label="Permalink to &quot;alpha 和 beta 版本的侧重点会有所不同&quot;">&ZeroWidthSpace;</a></h3> <p>首先 Vue 2.0 对 alpha、beta 有自己的理解和设定：alpha 版本旨在完善 API、考虑所需的特性；而来到 beta 版则会对未来的正式发布进行充分的“消化”，比如提前进行一些必要的 breaking change，增强框架的稳定性、完善文档和周边工具 (如 vue-router 2.0 等)</p> <h3 id="最后的几个-alpha-版本主要更新" tabindex="-1">最后的几个 alpha 版本主要更新 <a class="header-anchor" href="#最后的几个-alpha-版本主要更新" aria-label="Permalink to &quot;最后的几个 alpha 版本主要更新&quot;">&ZeroWidthSpace;</a></h3> <p>Vue 本身的语法基础这里就不多赘述了，网上有很多资料可以查阅，我们已经假定你比较熟悉 Vue 并对 2.0 的理念和技术预览版的状态有一定的了解。</p>

2016/7/28
阅读更多

通过一张图走进 Vue 2.0

<p>这可能是字最少的一篇了，都在图里 - -</p> <p>文字介绍稍后抽空再补补</p> <p><a href="/images/posts/a-big-map-to-intro-vue-next/660d0cdfgw1f3sv9xpn3vj21221yrdp8.jpg"><img src="/images/posts/a-big-map-to-intro-vue-next/660d0cdfgw1f3sv9xpn3vj21221yrdp8.jpg" alt=""></a></p>

2016/5/12
阅读更多

Code Review for Vue 2.0 Preview

<p>是的！<a href="https://jiongks.name/blog/announcing-vue-2/" target="_blank" rel="noreferrer">Vue 2.0 发布了！</a> 源代码仓库<a href="https://github.com/vuejs/vue/tree/next" target="_blank" rel="noreferrer">在此</a></p> <p>首先，当我第一次看到 Vue 2.0 的真面目的时候，我的内心是非常激动的</p> <h3 id="demo" tabindex="-1">Demo <a class="header-anchor" href="#demo" aria-label="Permalink to &quot;Demo&quot;">&ZeroWidthSpace;</a></h3> <p>来个简单的 demo，首先把 <code>dist/vue.js</code> 导入到一个空白的网页里，然后写：</p> <p><strong>当然，在大家阅读下面所有的内容之前，先想象一下，这是一个运行时 min+gzip 后只有 12kb 大小的库</strong></p> <pre><code>&lt;script src=&quot;./dist/vue.js&quot;&gt;&lt;/script&gt; &lt;div id=&quot;app&quot;&gt; Hello {{who}} &lt;/div&gt; &lt;script&gt; new Vue({ el: '#app', data: {who: 'Vue'} }) &lt;/script&gt; </code></pre> <p>你将看到 &quot;Hello Vue&quot;</p> <p>然后再看一个神奇的：</p> <pre><code>&lt;script src=&quot;./dist/vue.js&quot;&gt;&lt;/script&gt; &lt;div id=&quot;app&quot;&gt;&lt;/div&gt; &lt;script&gt; new Vue({ el: '#app', render: function () { with (this) { __h__('div', {staticAttrs:{&quot;id&quot;:&quot;app&quot;}}, [(&quot;\n Hello &quot;+__toString__(who)+&quot;\n&quot;)], '' ) } } data: {who: 'Vue'} }) &lt;/script&gt; </code></pre> <p>这个是 compile 过后的格式，大家会发现首先 <code>#app</code> 下不需要写模板了，然后 <code>&lt;script&gt;</code> 里多了一个 <code>render</code> 字段，Vue 在运行时其实是会把模板内容先转换成渲染方法存入 <code>render</code> 字段，然后再执行，如果发现 <code>render</code> 已经存在，就跳过模板解析过程直接渲染。所以在 Vue 2.0 中写一段模板和写一个 <code>render</code> option 是等价的。为什么要这样设计，稍后会我们会涉及到。</p>

2016/4/28
阅读更多

Vue 2.0 发布啦！

<p>原文：<a href="https://medium.com/the-vue-point/announcing-vue-js-2-0-8af1bde7ab9#.cyoou0ivk" target="_blank" rel="noreferrer">https://medium.com/the-vue-point/announcing-vue-js-2-0-8af1bde7ab9#.cyoou0ivk</a></p> <p><img src="/images/posts/announcing-vue-2/660d0cdfgw1f3bs1115fsj20ug0jiq6m.jpg" alt=""></p> <p>今天我们非常激动的首发 Vue 2.0 preview 版本，这个版本带来了很多激动人心的改进和新特性。我们来看看这里面都有些什么！</p>

2016/4/27
阅读更多

务实的小而美

<p>随意分享几则自己近期的感悟</p> <h3 id="人不够" tabindex="-1">人不够？ <a class="header-anchor" href="#人不够" aria-label="Permalink to &quot;人不够？&quot;">&ZeroWidthSpace;</a></h3> <p>我自己发现周围的同学越来越把一句话挂在嘴边，那就是：我们就这么些人，想搞定这件事情是远远不够的</p> <p>说白了，大家觉得“人多好办事”，“规模”这个词很多情况下几乎就是个褒义词。</p> <p>但是今天有些变化正在悄然发生，比如人类的学习能力越来越强，同时信息技术越来越发达，学习新知识的门槛越来越低，比如各技术领域的成熟度越来越高，比如移动时代前所未有的技术挑战，在有限的硬件性能和网络带宽的情况下，越是“规模”的东西越难以维持；比如体力和知识都逐渐远离核心竞争优势等等</p> <h3 id="拥抱社区-我们有更多人" tabindex="-1">拥抱社区，“我们有更多人” <a class="header-anchor" href="#拥抱社区-我们有更多人" aria-label="Permalink to &quot;拥抱社区，“我们有更多人”&quot;">&ZeroWidthSpace;</a></h3> <p>一件事搞得起来搞不起来，逐渐不取决于我们的团队有多少人，而取决于我们有没有让这件事情发生在最广阔的舞台上，因为一个技术团队再多人，哪怕一百多人，相比起任何一个知名技术社区都是九牛一毛，而一个集团、一个国家、一门语言的社区，相比起全球的互联网社区，也都是渺小的。所以今天，我们想在技术上成就一件事，未必需要很大的团队，未必需要很多人在身边</p> <p>同时，我们也不能小看个体在科技发展中所起到的关键作用。技术的不断融合和碰撞也加速了这件事情。所以更重要的不是团队有多少人，而是团队有没有能够真正起到关键作用的个体，找到对的人，比组建一支上百人的团队要重要得多</p> <h3 id="从社区汲取最好的技术" tabindex="-1">从社区汲取最好的技术 <a class="header-anchor" href="#从社区汲取最好的技术" aria-label="Permalink to &quot;从社区汲取最好的技术&quot;">&ZeroWidthSpace;</a></h3> <p>我敢说，抛开具有真正技术驱动力的公司，绝大多数公司的技术工作都能够在社区找到现成并且适合的方案，也都不太需要最高精简的科研探索。一个务实的技术方案，一定是在大量的社区成熟技术基础上建立起来的，再加上一点点针对自身业务独特性的技术实践。不过看上去“没什么自己的东西”罢了，如果大家很介意这东西“得是我自己的”，那么你需要继续考虑这个问题：自己搞出来的东西能不能比今天社区的更好，能不能发展成更好的社区，是否可以在社区中的深度参与从而把“别人的”变成“自己的”</p> <h3 id="在社区中施展-检验自己的技术" tabindex="-1">在社区中施展+检验自己的技术 <a class="header-anchor" href="#在社区中施展-检验自己的技术" aria-label="Permalink to &quot;在社区中施展+检验自己的技术&quot;">&ZeroWidthSpace;</a></h3> <p>然而社区不应该只有索取，还应该有奉献，如果你发现有件事情是别人也会再次遇到的那种事情，但社区没有合适现成的东西，那么恭喜你，赶紧开工吧</p> <p>有的时候觉得社区化的技术发展也有它残酷的一面，同类的方案或工具库基本上也就全球数一数二的几个能生存下来，并且体现出可观的价值，稍微差一点的，也许绝对实力没有差很多，但只要不是第一，所产生的价值和影响力就少得可怜了。所以想掂量掂量自己，看看是不是这块料，不妨放到社区里跟大家一起来一场真正的PK吧！也别自己憋着，别觉得“等我弄得再完善一点再给你们看”，因为在社区化的技术发展中，这样做只会让自己越来越没有价值和勇气把它拿出来了。当然也不必贪多，哪怕是一个小小的功能，如果做到最好，能够被全球的开发者使用，那也是极好的</p> <h3 id="合理的把技术运用在工作中" tabindex="-1">合理的把技术运用在工作中 <a class="header-anchor" href="#合理的把技术运用在工作中" aria-label="Permalink to &quot;合理的把技术运用在工作中&quot;">&ZeroWidthSpace;</a></h3> <p>我们在工作中逐渐对人的评价，会由评价其绝对的技术实力，转向评价其运用各方面技术解决实际问题的能力。这两者之间有一个比较形象的比喻，就好比我们学生时期背单词，拿出任何一个单词来，都能立刻说出它的含义、发音、常用短语、同义词、反义词、各种形态，但面对具体的对话场景不知道该用哪个词最合适最得体，这是比较典型的一种现象。其实前者就像是一个人的技术实力，后者就像是一个人的解决实际问题的能力。所以新知识新技术不光要学，还要学以致用，如何合理运用技术解决实际问题才是我们真正希望看到的。</p> <h3 id="把工作中的必经之路和常见任务萃取出来沉淀为最佳实践" tabindex="-1">把工作中的必经之路和常见任务萃取出来沉淀为最佳实践 <a class="header-anchor" href="#把工作中的必经之路和常见任务萃取出来沉淀为最佳实践" aria-label="Permalink to &quot;把工作中的必经之路和常见任务萃取出来沉淀为最佳实践&quot;">&ZeroWidthSpace;</a></h3> <p>现在回到“小而美的务实方案”这件事情上。我们认为看上去很重要、工作量很大、需要很多人来做的工作，是可以充分拥抱社区，汲取最好的技术，同时发挥关键角色的关键作用，并把技术合理运用在实际需求上。整件事情的成败有很多因素，但是“规模”这个因素显然不在考前的位置了</p> <p>基于这样的思考，我觉得，自己喜欢的团队，是一个小而美的团队</p>

2016/1/6
阅读更多

Vue.js 1.0.0 发布了！

<p>作为“打入敌人内部”的第一件事，转载一下 Vue.js 1.0.0 新世纪福音战士 (其实发这篇文章的时候已经 1.0.3 了) 正式发布的<a href="https://vuejs.org/2015/10/26/1.0.0-release/" target="_blank" rel="noreferrer">博文</a> ^_^</p> <p><img src="/uploads/2015/10/2139857295.png" alt="Vue.js"></p> <hr /> <blockquote> <p>Hi HN (Hacker News)! 如果你还不熟悉 Vue.js 的话，可以通过<a href="http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/" target="_blank" rel="noreferrer">这篇文章 (英文)</a>对其有个总体印象。</p> </blockquote> <p>在经历了 300+ 次提交、8 次 alpha、4 次 beta 和 2 次 rc 之后，今天我很荣幸的向大家宣布 <a href="https://github.com/vuejs/vue/releases/tag/1.0.0" target="_blank" rel="noreferrer">Vue.js 1.0.0 Evangelion</a> 正式发布了！非常感谢所有参与 API 重设计的同学们——没有来自社区的贡献这是不可能完成的。</p>

2015/10/29
阅读更多

[译]如何成为一名卓越的前端工程师

<p><mark>译自 <a href="http://philipwalton.com/articles/how-to-become-a-great-front-end-engineer/" target="_blank" rel="noreferrer">Philip Walton 的博客</a></mark></p> <p>看过之后非常有感触，很多观点都是自己长期非常坚持和认同的，所以翻译出来分享给更多的前端同学！</p> <hr /> <p>最近我收到一封读者来信让我陷入了思考，信是这么写的：</p> <blockquote> <p>Hi Philip，您是否介意我问您是如何成为一名卓越 (great) 的前端工程师的？对此您有什么建议吗？</p> </blockquote> <p>我不得不承认，我很惊讶被问这样的问题，因为我从来不觉得自己是个很卓越的前端工程师。甚至我入行头几年时并不认为自己可以做好这一行。我只确定自己比自己想象中还才疏学浅，而且大家面试我的时候都不知道从何问起</p> <p>话虽这么说，我到现在做得还算不错，而且成为了团队中有价值的一员。但我最终离开 (去寻求新的挑战——即我还不能够胜任的工作) 的时候，我经常会被要求招聘我的继任者。现在回看这些面试，我不禁感叹当我刚开始的时候自己在这方面的知识是多么的匮乏。我现在或许不会按照我自己的模型进行招聘，即便我个人的这种经历也有可能成功。</p> <p>我在 web 领域工作越长时间，我就越意识到区分人才和顶尖人才的并不是他们的知识——而是他们思考问题的方式。很显然，知识在很多情况下是非常重要而且关键的——但是在一个快速发展的领域，你前进和获取知识的方式 (至少在相当长的一段时间里) 会比你已经掌握的知识显得更加重要。更重要的是：你是如何运用这些知识解决每天的问题的。</p> <p>这里有许许多多的文章谈论你工作中需要的语言、框架、工具等等。我希望给一些不一样的建议。在这篇文章里，我想谈一谈一个前端工程师的心态，希望可以帮助大家找到通往卓越的道路。</p>

2015/8/10
阅读更多

手机淘宝前端的图片相关工作流程梳理

<p>本文首发自<a href="https://github.com/amfe/article/issues/8" target="_blank" rel="noreferrer">阿里无线前端博客</a></p> <p><em>注：本文摘自阿里内网的无线前端博客《无线前端的图片相关工作流程梳理》。其实是一个月前写的，鉴于团队在<a href="http://css.w3ctech.com/" target="_blank" rel="noreferrer">中国第二届 CSS Conf</a> 上做了《手机淘宝 CSS 实践启示录》的分享，而图片工作流程梳理是其中的一个子话题，故在此一并分享出来，希望仍可以给大家一些经验和启发。另外，考虑到这是一篇公开分享，原版内容有部分删节和调整，里面有一些经验和产出是和我们的工作环境相关的，不完全具有普遍性，还请见谅。</em></p> <p>今天很荣幸的跟大家分享一件事情，就是经过差不多半年多的努力，尤其是最近 2 周的“突击扫尾”，无线前端团队又在工具流程方面有了一个不小的突破：我们暂且称其为“图片工作流”梳理。</p> <h3 id="图片-图片-图片" tabindex="-1">图片！图片！图片！ <a class="header-anchor" href="#图片-图片-图片" aria-label="Permalink to &quot;图片！图片！图片！&quot;">&ZeroWidthSpace;</a></h3> <p>要说最近 1 年里，无线前端开发的一线同学最“难搞”的几件事，图片处理绝对可以排在前三。</p> <ul> <li>首先，我们首先要从视觉稿 (绝大部分出自 photoshop) 里把图片合理的分解、测量、切割、导出——俗称“切图”</li> <li>然后，我们要把切好的图放入页面代码中，完成相关的本地调试</li> <li>第三步，把本地图片通过一个内部网站 (名叫 TPS) 上传到我们的图片 CDN 上，并复制图片的 CDN 地址，把本地调试用的相对路径替换掉</li> <li>第四步，不同的图片、不同的外部环境下 (比如 3g 还是 wifi)，我们需要给图片不一样的尺寸、画质展现，并有一系列的配置需要遵循</li> <li>如果视觉稿有更改 (不要小看这件事，微观上还是很频繁的哦)，不好意思，从第一步开始再重新走一遍……</li> </ul> <p>这里面“难搞”在哪些地方呢？我们逐一分析一下：</p> <ol> <li>“切图”的效率并不高，而且每一步都很容易出现返工或再沟通</li> <li>打开 TPS 网站上传图片放到前端开发流程中并不是一个连贯流畅的步骤，而且 GUI 相比于命令行工具的缺陷在于无法和其它工具更好的集成</li> <li>替换 CDN 图片路径的工作机械而繁琐，并且代码中替换后的图片地址失去了原本的可读性，非常容易造成后期的维护困惑甚至混乱</li> <li>适配工作异常繁杂和辛苦，也很容易漏掉其中的某个环节</li> <li>视觉变更的成本高，web 的快速响应的特点在丧失</li> </ol> <p>所以可能把这些东西画成一张图表的话：</p> <p><img src="/images/posts/tbcdn/58a8b4f12816b6f71918c31ee5a0ceae74f40fb9.jpg" alt=""></p> <h3 id="团队的单点突破" tabindex="-1">团队的单点突破 <a class="header-anchor" href="#团队的单点突破" aria-label="Permalink to &quot;团队的单点突破&quot;">&ZeroWidthSpace;</a></h3> <p>在最近半年的一段时间里，无线前端团队先后发起了下面几项工作，从某个点上尝试解决这些问题：</p>

2015/8/10
阅读更多

[译]如何让办公室政治最小化

<p>来来来，看看办公室政治是个什么东西，以及如何将其最小化<br> 翻译如有疏漏还请指正</p> <p><mark>译自：<a href="http://www.bhorowitz.com/how_to_minimize_politics_in_your_company" target="_blank" rel="noreferrer">How to Minimize Politics in Your Company</a> via www.bhorowitz.com</mark></p> <p><em>更新：跟身边一些朋友讨论之后，觉得之前翻译的标题“杜绝”言过了，还是规规矩矩翻译成了“最小化”</em></p> <hr /> <blockquote> <p>Who the f@#k you think you f$&amp;kin’ with<br> I’m the f%*kin’ boss</p> <p>—Rick Ross, Hustlin'</p> </blockquote> <p>在我所有的从商经历中，我从没听过有人说：“我喜欢办公室政治”。但在我们的周围，令人深恶痛绝的政治又到处都是，甚至自己的公司就是如此。既然大家都不喜欢政治，那为什么它无处不在呢？</p> <p>政治行为几乎都源自 CEO。也许你会觉得：“我讨厌政治，我也不关心政治，但是我的周围充满了政治气味。这显然不是我造成的。”很遗憾，你并不需要怎么关心政治就会让你的周围充斥政治手段。实际上，很少关心政治的 CEO 才会让办公室充斥政治手段。不关心政治的 CEO 们往往会直接助涨政治行为。</p> <p>我这里说的政治，就是指员工追求自我职业发展多于价值产出和贡献。也许还有别样的政治类型，但是这类政治行为真的很烦。</p>

2015/8/2
阅读更多

Vue.js 源码学习笔记

<p>最近饶有兴致的又把最新版 <a href="https://vuejs.org/" target="_blank" rel="noreferrer">Vue.js</a> 的源码学习了一下，觉得真心不错，个人觉得 Vue.js 的代码非常之优雅而且精辟，作者本身可能无 (bu) 意 (xie) 提及这些。那么，就让我来吧：）</p> <h3 id="程序结构梳理" tabindex="-1">程序结构梳理 <a class="header-anchor" href="#程序结构梳理" aria-label="Permalink to &quot;程序结构梳理&quot;">&ZeroWidthSpace;</a></h3> <p><img src="/images/posts/vue-code-review/8142ef3fc2055839f1a93a933d80e17694b4f76b.png" alt="Vue 程序结构"></p> <p>Vue.js 是一个非常典型的 MVVM 的程序结构，整个程序从最上层大概分为</p> <ol> <li>全局设计：包括全局接口、默认选项等</li> <li>vm 实例设计：包括接口设计 (vm 原型)、实例初始化过程设计 (vm 构造函数)</li> </ol> <p>这里面大部分内容可以直接跟 Vue.js 的<a href="https://vuejs.org/api/" target="_blank" rel="noreferrer">官方 API 参考文档</a>对应起来，但文档里面没有且值得一提的是构造函数的设计，下面是我摘出的构造函数最核心的工作内容。</p> <p><img src="/images/posts/vue-code-review/00049a09def4aff8d80f3bb7229e3f6d395426fb.png" alt="Vue 实例初始化"></p> <p>整个实例初始化的过程中，重中之重就是把数据 (Model) 和视图 (View) 建立起关联关系。Vue.js 和诸多 MVVM 的思路是类似的，主要做了三件事：</p> <ol> <li>通过 observer 对 data 进行了监听，并且提供订阅某个数据项的变化的能力</li> <li>把 template 解析成一段 document fragment，然后解析其中的 directive，得到每一个 directive 所依赖的数据项及其更新方法。比如 <code>v-text=&quot;message&quot;</code> 被解析之后 (这里仅作示意，实际程序逻辑会更严谨而复杂)： <ol> <li>所依赖的数据项 <code>this.$data.message</code>，以及</li> <li>相应的视图更新方法 <code>node.textContent = this.$data.message</code></li> </ol> </li> <li>通过 watcher 把上述两部分结合起来，即把 directive 中的数据依赖订阅在对应数据的 observer 上，这样当数据变化的时候，就会触发 observer，进而触发相关依赖对应的视图更新方法，最后达到模板原本的关联效果。</li> </ol> <p>所以整个 vm 的核心，就是如何实现 observer, directive (parser), watcher 这三样东西</p>

2015/7/26
阅读更多

从原型到发布——“团队时间线” 1.0 开发心得

<p>这篇文章将会记录我自己最近一周时间里，从产生“团队时间线”这个想法，到产品设计、交互设计、开发、迭代、再到 1.0 发布的整个过程。整件事情跨越了多个分工职能，所以这件事情虽然并不大，但对我来说是一种不一样的做事方式和经历，所以觉得应该记录下来。</p> <p><img src="/uploads/2015/06/1009213551.png" alt=""></p> <p><img src="http://img1.tbcdn.cn/L1/461/1/08312508850019d9db1c250acd4ae15fb66053f9" alt="_2015_06_27_2_11_23"></p> <p>“团队时间线”是个可视化展示团队所有同学时间分配/管理的平台。每个人都可以在“我的时间管理”页面极简的记录自己的时间，比如从某天到另外一天做了一个项目、或者昨天开了一个重要的会等等。</p>

2015/6/27
阅读更多

Vue + webpack 项目实践

<p>最近在内部项目中做了一些基于 vue + webpack 的尝试，在小范围和同事们探讨之后，还是蛮多同学认可和喜欢的，所以通过 blog 分享给更多人。</p> <p>首先，我会先简单介绍一下 vue 和 webpack：</p> <p>(当然如果你已经比较熟悉它们的话前两个部分可以直接跳过)</p> <h3 id="介绍-vue" tabindex="-1">介绍 vue <a class="header-anchor" href="#介绍-vue" aria-label="Permalink to &quot;介绍 vue&quot;">&ZeroWidthSpace;</a></h3> <p><img src="/images/posts/tbcdn/bfe85a6c83b251c21d6b7c1fd38baae3fa790540.jpg" alt="_2015_06_25_12_37_36"></p> <p><a href="https://vuejs.org/" target="_blank" rel="noreferrer">Vue.js</a> 是一款极简的 mvvm 框架，如果让我用一个词来形容它，就是 <strong>“轻·巧”</strong> 。如果用一句话来描述它，它能够集众多优秀逐流的前端框架之大成，但同时保持简单易用。废话不多说，来看几个例子：</p> <pre><code>&lt;script src=&quot;vue.js&quot;&gt;&lt;/script&gt; &lt;div id=&quot;demo&quot;&gt; {{message}} &lt;input v-model=&quot;message&quot;&gt; &lt;/div&gt; &lt;script&gt; var vm = new Vue({ el: '#demo', data: { message: 'Hello Vue.js!' } }) &lt;/script&gt; </code></pre> <p>首先，代码分两部分，一部分是 html，同时也是视图模板，里面包含一个值为 <code>message</code> 的文本何一个相同值的输入框；另一部分是 script，它创建了一个 vm 对象，其中绑定的 dom 结点是 <code>#demo</code>，绑定的数据是 <code>{message: 'Hello Vue.js'}</code>，最终页面的显示效果就是一段 <code>Hello Vue.js</code> 文本加一个含相同文字的输入框，更关键的是，由于数据是双向绑定的，所以我们修改文本框内文本的同时，第一段文本和被绑定的数据的 <code>message</code> 字段的值都会同步更新——而这底层的复杂逻辑，Vue.js 已经全部帮你做好了。</p> <p><img src="/images/posts/tbcdn/088c2fe6a59cf1babdb83e963e844bc62b96c8c1.jpg" alt="_2015_06_24_11_00_20"></p>

2015/6/25
阅读更多

用 Koa 写服务体验

<p><img src="/images/posts/tbcdn/5682414ab4dc8dd1b4ff91b0b57f96947c1c1c11.jpg" alt="Koa"></p> <p>晒一下自己用 <a href="https://koajs.com/" target="_blank" rel="noreferrer">Koa</a> next generation web framework for node.js 写的一个 web 服务</p> <p>这个 web 服务主要是做内容的列表展示和搜索的 (可能说得比较抽象，但确实是 web 服务最常需要做的事情) 主要的文件一共就2个：</p> <ul> <li><code>app.js</code> 主程序</li> <li><code>lib/model.js</code> 数据层</li> </ul> <p>其中 <code>model.js</code> 是和具体业务逻辑相关的，就不多介绍了，这也不是 Koa 的核心；而 <code>app.js</code> 的代码可以体现 Koa 的很多优点，也使得代码可以写得非常简练而去清晰——这是我自己都完全没有想到的事情</p>

2015/6/21
阅读更多

webcomponents 笔记 之 配置管理

<p>话说上周末看到<a href="https://weibo.com/1712131295/CaM1n2FcY" target="_blank" rel="noreferrer">一个吐槽腾讯“内部开源”的微博</a>，后来我想了想，自己那么骚包的在项目还没做完之前，就在 <a href="pathname:///slides/css-scoping/" target="_blank" rel="noreferrer">CSSConf</a> 上说我们将来要开源一个名叫 Zorro 的库。结果好几个月过去了还是没有准备好，也就不敢再笑话别人了……</p> <p>我觉得把东西开源出来之前，有几件事要准备好，不然除了自己刷存在感之外，真的没意义。比如：</p> <ol> <li>是否有了 (或阐述清楚了) 明确的目标和方向，不然找不到合适的合作者和贡献者</li> <li>是否有了 (或阐述清楚了) 明确的设计哲学和开发原则，不然大家无法形成合力，项目很容易陷入混乱</li> <li>是否有了最小的可工作版本，不然雪球滚不起来</li> <li>是否有了充分的文档、demo和测试用例，让大家更直观的了解项目，利用项目，也对项目的质量更有信心</li> </ol> <p>印象中我见到的优秀的开源项目，基本都在被大家广泛认识之前，都已经把这些事情打理好了——这也是我一直推崇的。<br> 好吧很惭愧，这几点我还都没有做到……</p> <p>不过在这之前，我愿意在此分享一些自己开发中的心得，跟大家一起探讨相关的话题。</p> <p>-- 以上是一些比较啰嗦的铺陈 --</p> <h3 id="组件分解的方式及其衍变" tabindex="-1">组件分解的方式及其衍变 <a class="header-anchor" href="#组件分解的方式及其衍变" aria-label="Permalink to &quot;组件分解的方式及其衍变&quot;">&ZeroWidthSpace;</a></h3> <p>在开发大型应用的时候，难免要用到一些组件化的分解方式。比如：把一个相册浏览界面分解成：“相册列表”和“大图预览”两个区域，“相册列表”又由一个个“相册缩略图”组成，每个“相册缩略图”包含了一个“小图片”以及“预览按钮”、“删除按钮”、“排序按钮”等操作按钮……</p> <p>而如何管理和划分组件逐渐变成了前端工程里的一门学问。</p>

2015/3/30
阅读更多

14}, {15

<p>去年年底的时候刚换了工作，刚到杭州，一到杭州就赶上996，匆匆忙忙，年底就稀里糊涂过去了<br> 紧接着就是忙碌的一整年，忙工作，忙生活，各种忙</p> <p>今天晚上，改完了自己名下的最后一个bug，也算是给2014简单收个尾吧，也突然觉得自己有一点时间回顾一下了</p> <p>先从13年说起吧，最大的变化就是<a href="https://weibo.com/1712131295/ApUfbAq2a" target="_blank" rel="noreferrer">我换工作了</a>，也搬家了，从北京搬到了杭州，从此过上了南方人的生活：</p> <ul> <li>夏天更热，冬天屋里更冷，这一点嘛，已经差不多习惯了。无非是多开空调呗……</li> <li>空气更好，雨水更多</li> <li>交通更好，上班路上很畅通，而且有班车坐很方便</li> <li>也赶在限牌之前买到了自己心仪已久的那款车</li> <li>有了车以后，生活确实方便了许多，晚上或者周末出门有了更多选择，近郊出游也很方便，还去了一趟上海、去了一趟宁波、去了一趟横店 (说道横店，我超喜欢秦宫，气势恢宏，有刀枪剑戟的感觉)</li> <li>杭州本来也是个旅游城市，西湖、龙井、西溪湿地，也给平日的生活增添了很多乐趣</li> <li>饮食方面，这边吃海鲜/日料的机会比在北京的时候多多了，相对的火锅和面食少了</li> <li>运动比以前少了，以前在北京常踢球的，来杭州之后几乎没怎么踢，可能是因为自己没找对组织，现在逐渐开始多游泳了</li> </ul> <p>经过了1年多的时间，我想说，我很喜欢杭州这个地方。</p> <p>然后说说工作吧。</p> <p>这一年多时间我其实没做太多事情，更多的还是在熟悉环境，熟悉人、熟悉业务、熟悉流程、熟悉沟通方式、熟悉做事风格。阿里确实是个巨大的集团，有超过十年的历史和沉淀。我希望可以帮助团队做得更好，但首当其冲的事情是要先弄清楚游戏规则，努力找到问题的症结，谨慎的提出可实施方案，然后循序渐进的往前走。可以说每一步都要走得小心谨慎，稍有疏漏，可能就前功尽弃了，这一点在阿里可能体现的尤为明显。我想这也正是我之前的工作经验可以体现出价值的地方。</p> <p>从工程和管理的角度，我今年主要是以培训或布道的方式为大家分享一些系统而又务实的最佳实践，包括如何高效开会、合作、项目管理、代码管理、时间管理，也包括组织团队讨论编码规范、项目目录结构、文档格式、工具链使用等。希望可以全面的提升团队的工作效率和效果。这些工作会继续延续到2015年。</p> <p>团队的技术视野也是一个亟待提高的地方，这同时也和团队每一位同学的职业发展有着密切的联系，这也是在新的一年我希望可以做好的一件事。</p> <p>技术上，今年我主要的精力聚焦在了2件事情上：前半年花了一些时间在触摸屏幕操作上，研究了几个手势库，也尝试自己写，不过没有太像样的成果，算是个失败的过程吧，我今天回顾这件事情，主要是没有抓到重点，上来就研究多点复杂操作，也许这些东西在未来可能会显得更有价值，还是决定放一放，什么时候有了更成熟的思路，再考虑拿起来；后半年花了更多时间在 web components 上，还有 polymer 框架，我觉得这是我们看得见的未来，非常值得投入进去看一看，我和几个同事一起做了些实践，也有很多心得。</p> <p>在全年技术探索和实践的过程中，我有一个深刻的感悟，是和“造轮子”这件事有关系的，在今天这个技术世界里，与其说“不要重复造轮子”，不如说“造轮子”的和“用轮子”的已经是两种性质的工作了。我们今天很多人选择的工作，首要任务是造汽车而不是造轮子。我觉得这是很多讨论“到底要不要造轮子”的问题的根源。造汽车和造轮子有各自的技术含量，有各自需要认真思考的问题，如果没有认清这个问题，明明是造汽车的，结果觉得造轮子更牛掰而去造轮子，必定没有好结果，或者事倍功半；如果真想造轮子，应该好好找个造轮子的地方，才会造出最好的轮子，不然也只会做个半调子。篇幅有限，这事儿暂不细说了……</p> <p>技术方面还有一件事，就是开始组织 W3C 中文兴趣组的技术讨论，我们这一年组织了几次《ig在线talk》，也发起了一些标准翻译，也讨论了一些诸如首屏渲染的提案，还有中文字体和排版的制定，有的时候电话会议的时间已经超了，但是大家还会津津有味的在技术的领域里讨论闲聊，这种感觉是很少有的，相信经历过这些讨论的同学们也感受得到。</p> <p>另外自己在2014年初暗自下决心要看10本以上的书——这对于我这种平时没有看书习惯的人来说其实并不容易——这个目标算是已经达成了。这里面《习惯的力量》、《合作的进化》、《反脆弱》、《rework》、《remote》都是令我印象深刻的书，看过之后有非常多的收获。</p> <p>2015年，我有这么几个简单的想法：</p> <ul> <li>第一，要有健康的身体。这似乎是我从来没有过的对健康如此重视，也是因为现在工作和生活能够协调的更好的一个结果吧。不要连续熬夜或者休息不够，更重要的是保持运动，控制饮食，眼睛、颈椎、牙齿和肝这4个上班族体检最多出现的问题都要特别注意起来。</li> <li>第二，多花时间陪家人、老同学、周围的朋友，多参与一些社交活动</li> <li>第三，要把自己的编码量降下来，把团队打理好。我也深刻的感觉到，自己应该花更多的时间关怀身边的每一位同事，业务上的、技术上的、心态上的，都有很多值得去做的事情。让团队每一个人更好，比自己一个人更好重要的多。</li> <li>第四，把有限的个人精力集中投入在1件或几件事上</li> <li>第五，看15本书</li> </ul> <p>到明年这个时候，我会把这篇blog翻出来看看完成的怎么样：）</p>

2015/1/1
阅读更多

小秀个人的13~14年摄影作品 (共19张)

<p>2 年前<a href="/blog/recent-photography-works.html">曾经也发过几张自己拍的照片</a>，似乎大家对于我的拍照技术还是蛮宽容的。下面几张同样是我认真挑选过的这 2 年来拍的，同样求轻拍 ^_^</p> <p>p.s. 这 2 年真的经历了不少事情</p> <p>港版风景</p> <p><img src="/uploads/2014/10/1117334014.jpg" alt="港版风景"></p>

2014/10/29
阅读更多

由今年D2前端论坛想到的

<p><img src="/uploads/2014/10/1199434854.png" alt="第9届D2前端技术论坛"></p> <p>之前参加过 2 次，今年的 <a href="https://d2forum.alibaba-inc.com/" target="_blank" rel="noreferrer">D2</a> 是我第一次以“自己人”的身份参加的。和往年一样，受益匪浅，但也有了一些不一样的想法。</p>

2014/10/26
阅读更多

[译]CSS命名神马的真心难

<p><mark>译自：<a href="http://seesparkbox.com/foundry/naming_css_stuff_is_really_hard" target="_blank" rel="noreferrer">Naming CSS Stuff Is Really Hard</a></mark></p> <p>找到的这篇文章算是对我之前写的 <a href="/blog/html-or-id-or-class.html">《标签？ID？还是CLASS？》</a> 的再深入。我当时写那篇文章的时候，就有朋友提出了“非语义化”的 class 命名的问题，我当时确实觉得很纠结，简单的想法是“框架性质的表象 class 我没异议……框架的实质是通过降低灵活性达成更广泛的共识，我们个人不要再创造这样的样式就好了”，但没有想到特别好的“套路”，更多的是在实际情况中再分辨。看过这篇文章，我似乎找到了更好的答案。同时顺着文中提到的 <a href="http://nicolasgallagher.com/about-html-semantics-front-end-architecture/" target="_blank" rel="noreferrer">Nicolas 那篇文章</a>看下去，也对 OOCSS、BEM 之类的提法有了更多的认同感。特译给大家参考。</p>

2014/9/23
阅读更多

[译]Git 分支的最佳实践

<p><mark>译自：<a href="https://nvie.com/posts/a-successful-git-branching-model/" target="_blank" rel="noreferrer">A successful Git branching model» nvie.com</a></mark></p> <hr /> <p>本文将展示我一年前在自己的项目中成功运用的开发模型。我一直打算把这些东西写出来，但总是没有抽出时间，现在终于写好了。这里介绍的不是任何项目的细节，而是有关分支的策略以及对发布的管理。</p> <p><img src="/images/posts/a-successful-git-branching-model/git-model@2x.png" alt=""></p> <p>在我的演示中，所有的操作都是通过 git 完成的。</p>

2014/1/1
阅读更多

[译]撰写可测试的 JavaScript

<p><mark>译自：<a href="http://alistapart.com/article/writing-testable-javascript" target="_blank" rel="noreferrer">Writing Testable JavaScript - A List Apart</a></mark></p> <p>这篇文章算是 A List Apart 系列文章中，包括滑动门在内，令我印象最深刻的文章之一。最近有时间翻译了一下，分享给更多人，希望对大家有所帮助！</p> <hr /> <p><strong>我们已经面对到了这一窘境：一开始我们写的 JavaScript 只有区区几行代码，但是它的代码量一直在增长，我们不断的加参数、加条件。最后，粗 bug 了…… 我们才不得不收拾这个烂摊子。</strong></p> <p>如上所述，今天的客户端代码确实承载了更多的责任，浏览器里的整个应用都越变越复杂。我们发现两个明显的趋势：1、我们没法通过单纯的鼠标定位和点击来检验代码是否正常工作，自动化的测试才会真正让我们放心；2、我们也许应该在撰写代码的时候就考虑到，让它变得可测试。</p> <p>神马？我们需要改变自己的编码方式？是的。因为即使我们意识到自动化测试的好，大部分人可能只是写写集成测试(integration tests)罢了。集成测试的侧重点是让整个系统的每一部分和谐共存，但是这并没有告诉我们每个独立的<em>功能单元</em>运转起来是否都和我们预期的一样。</p> <p>这就是为什么我们要引入单元测试。我们已经准备好经历一段痛苦的<em>撰写单元测试</em>的过程了，但最终我们能够<em>撰写可测试的 JavaScript</em>。</p>

2013/12/11
阅读更多

[译]语义化版本管理

<p><mark>译自：<a href="http://semver.org/" target="_blank" rel="noreferrer">语义化版本管理</a> 2.0.0</mark></p> <h3 id="摘要" tabindex="-1">摘要 <a class="header-anchor" href="#摘要" aria-label="Permalink to &quot;摘要&quot;">&ZeroWidthSpace;</a></h3> <p>对于一个给定的版本号 MAJOR.MINOR.PATCH (主、次、补丁)，其变化的规律是：</p> <ol> <li>MAJOR version (主版本) 会在 API 发生不可向下兼容的改变时增大。</li> <li>MINOR version (次版本) 会在有向下兼容的新功能加入时增大。</li> <li>PATCH version (补丁版本) 会在bug以向下兼容的方式被修复时增大。</li> </ol> <p>我们还可以根据预发布、构建元数据 (build metadata) 的实际需求，在 MAJOR.MINOR.PATCH 格式之上扩展出额外的标记。</p> <h3 id="介绍" tabindex="-1">介绍 <a class="header-anchor" href="#介绍" aria-label="Permalink to &quot;介绍&quot;">&ZeroWidthSpace;</a></h3> <p>在软件管理领域，存在一个叫做“dependency hell (依赖地狱)”的坑。随着系统越变越大，你集成了越多的软件包，也越发觉得，有一天，你会陷入绝望。</p> <p>对于有很多依赖关系的系统来说，发布新版本的软件包会迅速变成一场噩梦。如果依赖性规定得太紧，你会陷入 version lock (版本锁，即每次软件包的升级无法产生新的版本)。如果依赖性规定得太松，你会不可避免的面对 version promiscuity (版本泛滥，假设未来版本是需要考虑兼容性的)。当 version lock 和 version promiscuity 让你的项目无法安全而又轻松的向前推进时，这就是所谓的 dependency hell。</p> <p>作为一种解决问题的办法，我提出了一套简单的规则和要求来表明版本号该如何确定和增加。这套规则基于但不仅限用于已经广泛存在的开源闭源软件的一般实践。为了让这个系统工作起来，你首先需要声明一个公有的 API，它可以由文档组成或在代码层面强制实现，且必须是清晰准确的。一旦你标识了你的公有 API，你就可以通过不同的版本号的增加来交流 API 的各种改变。设想一个形如 X.Y.Z 的版本，不影响 API 的 bug 修复会增大补丁版本，向下兼容的 API 增加或改变会增大次版本，而不兼容的 API 改变会增大主版本。</p> <p>我把这套系统称作“语义化版本管理”。在这套系统之下，版本号及其改变传递了代码背后的含义，以及每个相邻版本之间的变化。</p>

2013/12/1
阅读更多

[译]通过HTML5 Canvas API调节图像的亮度和颜色

<p><mark>译自：<a href="http://www.storminthecastle.com/2013/10/06/color-matrix-filters-using-the-html5-canvas/" target="_blank" rel="noreferrer">Adjusting Image Brightness and Color Using the HTML5 Canvas API</a></mark></p> <p>你曾否需要调节一张图片的亮度？或者增强红色通道让它变得温暖一些？</p> <p><img src="/images/posts/color-matrix-filters-using-the-html5-canvas/filtered.jpg" alt=""></p> <p>这是我之前两篇文章“<a href="http://www.storminthecastle.com/2013/04/06/how-you-can-do-cool-image-effects-using-html5-canvas/" target="_blank" rel="noreferrer">如何通过HTML5 Canvas处理图片酷效</a>”和“<a href="http://www.storminthecastle.com/2013/10/06/color-matrix-filters-using-the-html5-canvas/how-you-can-build-an-html5-photobooth-app/" target="_blank" rel="noreferrer">如何创建一个HTML5的大头贴应用</a>”的后续。在之前的那些文章里，我提供了一些可分离的颜色滤镜代码：灰度、灰褐色、红色、变亮、变暗等。这些滤镜都是经典的颜色滤镜，每个像素点的颜色都是独立运算的，互不影响。我们的可以将其建模成一个单独数据驱动的称为颜色矩阵滤镜(Color Matrix Filter)的东西。这一概念将会遍布本文。这种滤镜将会以一个包含权重(即系数)的颜色矩阵作为输入，并决定输出的颜色组件(color component)如何和输入的颜色组建相对应。</p>

2013/10/11
阅读更多

[译]JavaScript V8性能小贴士

<p><mark>译自：<a href="https://www.html5rocks.com/en/tutorials/speed/v8/" target="_blank" rel="noreferrer">Performance Tips for JavaScript in V8</a></mark></p> <h3 id="简介" tabindex="-1">简介 <a class="header-anchor" href="#简介" aria-label="Permalink to &quot;简介&quot;">&ZeroWidthSpace;</a></h3> <p>关于如何巧妙提高V8 JavaScript性能的话题，Daniel Clifford在Google I/O上做了<a href="https://www.youtube.com/watch?v=UJPdhx5zTaw" target="_blank" rel="noreferrer">一次非常精彩的分享</a>。Daniel鼓励我们“追求更快”，认真的分析C++和JavaScript之间的性能差距，根据JavaScript的工作原理撰写代码。在Daniel的分享中，有一个核心要点的归纳，我们也会根据性能指导的变化保持对这篇文章的更新。</p> <h3 id="最重要的建议" tabindex="-1">最重要的建议 <a class="header-anchor" href="#最重要的建议" aria-label="Permalink to &quot;最重要的建议&quot;">&ZeroWidthSpace;</a></h3> <p>最重要的是要把任何性能建议放在特定的情境当中。性能建议是附加的东西，有时一开始就特别注意深层的建议反而会对我们造成干扰。你需要从一个综合的角度看待你的Web应用的性能——在关注这些性能建议之前，你应该找<a href="https://developers.google.com/speed/pagespeed/" target="_blank" rel="noreferrer">PageSpeed</a>之类的工具大概分析一下你的代码，也算是跑个分先。这会防止你过度优化。</p> <p>对Web应用的性能优化，几个原则性的建议是：</p> <ul> <li>首先，未雨绸缪</li> <li>然后，找到症结</li> <li>最后，修复它</li> </ul> <p>为了完成这几个步骤，理解V8如何优化JS是一件很重要的事情，这样你就可以根据其对JS运行时的设计撰写代码。同样重要的是掌握一些帮得上忙的工具。Daniel也交代了一些开发者工具的用法，它们刚好抓住了一些V8引擎设计上最重要的部分。</p> <p>OK。开始V8小贴士。</p>

2013/9/29
阅读更多

[译]视觉差，走起！

<p><mark>译自：<span class="break-all"><a href="https://www.html5rocks.com/en/tutorials/speed/parallax/" target="_blank" rel="noreferrer">https://www.html5rocks.com/en/tutorials/speed/parallax/</a></span></mark></p> <h3 id="简介" tabindex="-1">简介 <a class="header-anchor" href="#简介" aria-label="Permalink to &quot;简介&quot;">&ZeroWidthSpace;</a></h3> <p>现在满大街都是视觉差(parallax)网站了，我们随便看几个：</p> <ul> <li><a href="http://www.rowtothepole.com/" target="_blank" rel="noreferrer">Old Pulteney Row to the Pole</a></li> <li><a href="https://www.adidas.com/com/apps/snowboarding/" target="_blank" rel="noreferrer">Adidas Snowboarding</a></li> <li><a href="https://www.bbc.co.uk/news/entertainment-arts-20026367" target="_blank" rel="noreferrer">BBC News - James Bond: Cars, catchphrases and kisses</a></li> </ul> <p>也许你对这玩意儿还不太熟，视觉差其实就是它的视觉结构会随着页面的滚动而变化。通常情况下页面里的元素会根据页面的滚动位置而缩放、旋转或移动。</p> <p><img src="/images/posts/parallax/parallax.jpg" alt="一个视觉差页面的demo"><br> 我们的视觉差demo的完整效果</p> <p>不管你喜不喜欢视觉差网站，有一件事毫无疑问，它是一个性能的黑洞。因为当页面滚动时，浏览器的优化都倾向于新内容随滚动而出现于屏幕的最上方或最下方的情况。一般来说，内容改变得越少浏览器性能越高。而对于一个视觉差网站来说，在页面滚动时，好多元素都在发生改变，大多数情况下整个页面的大块可视元素都在发生变化，所以浏览器不得不重绘整个页面。</p> <p>我们有理由这样归纳一个视觉差的网站：</p> <ul> <li>背景元素会在你向上或向下滚动页面时改变位置、旋转或缩放。</li> <li>页面内容，如文字或小的图片，在页面滚动时会按照传统的方式进行上下移动。</li> </ul> <p>建议大家先阅读我们之前介绍过的<a href="https://www.html5rocks.com/en/tutorials/speed/scrolling/" target="_blank" rel="noreferrer">滚动性能</a>来改进你的app的响应速度。本篇文章是基于那篇文章所写的。</p> <p>所以文字是如果你在建立一个视觉差网站，那么你是否受困于高昂的重绘开销？有没有别的改进建议使得性能最大化？让我们看看这几个方案：</p>

2013/9/22
阅读更多

[译]Chrome开发者工具中评估性能的五大新特性

<p><mark>摘自：<a href="https://www.html5rocks.com/en/tutorials/developertools/revolutions2013/#toc-key-performance" target="_blank" rel="noreferrer">Chrome DevTools Revolutions 2013</a></mark></p> <p>本次开发者工具的改进中有几项新特性是针对性能的：</p> <ul> <li>持续绘制模式</li> <li>显示绘制矩形及其层的边框</li> <li>每秒帧数的测量仪</li> <li>找到强制同步布局(layout thrashing)</li> <li>对象分配跟踪</li> </ul>

2013/9/18
阅读更多

精气神儿

<p>“国足打出了精气神儿”</p> <p>相关新闻：<a href="http://cs.sports.163.com/match/report/2702.html" target="_blank" rel="noreferrer">东亚杯-王永珀2球孙可建功 中国两球落后3-3日本</a></p> <p><img src="/uploads/2013/07/2059864972.jpg" alt=""></p> <p>当我再一次看到这样的标题的时候，我就知道，言外之意是国足的状况一定非常糟糕。</p> <p>精气神儿是个什么东西？我觉得是一种最基本的态度，它只是个精神层面的很虚的过程。我举个例子，当你一无所有的时候，你只能说：哦，至少我还有节操。——这就是拿精气神儿说事儿的节奏。</p> <p>国足说我们努力了，大家说其实人家从上到下还是很努力的，这一点我们还是要认可的……好吧你们确实真的很努力，但为时已晚。而且国足真的很差，现在才知道努力有个屁用？未雨绸缪的事情怎么从来没见足协做过？</p> <p>以前国足被叫作头球队，叫热身赛之王，如今头球也没了，热身赛也能输个精光，连博彩公司的小伙伴们都惊呆了。 以前几年赢不了韩国就说恐韩，如今15年不胜日本了，也没人造出个什么恐日了，因为觉得跟人家比不自量力，丢不起那人。 以前国足98年，当时还叫东亚四强赛，国足在日本的主场2比0羞辱对手，范志毅还踢飞丢了一个点球，不然就是3比0的大胜（对，两边都是成人队，而且都是男足）。如今在一片铺天盖地的唾骂声中，国足才开始努力，开始打出精气神儿，勉强在最后时刻，逼平了日本二线队。</p> <p>国足的努力掩盖不了一个事实，那就是战绩糟糕，排名持续下滑，多年无缘各项国际大赛。 这有什么可高兴的？</p> <p>所以请别扯淡！拿成绩说话！！</p> <p>看看今天的国足，还剩下什么？答：“只剩下两滴冰冷的泪水：一滴化斗酒添一份麻醉；一滴沉落于岁月的潮水。”</p> <p>好。我这里对国足的吐槽完毕。</p> <p>其实我没想太多聊国足。</p> <p>接下来，请把“国足”二字换成你看到“其实很努力”之后首先联想到的事物，然后把上面全文的“国足”二字换掉重读一遍。相信你会很有乐趣和感悟。</p>

2013/7/23
阅读更多

细节无微不至，彩屏让人又爱又恨——新老“神机”大对决：Nokia 1050 vs Nokia 1202

<h3 id="吐在前面的槽" tabindex="-1">吐在前面的槽…… <a class="header-anchor" href="#吐在前面的槽" aria-label="Permalink to &quot;吐在前面的槽……&quot;">&ZeroWidthSpace;</a></h3> <p>今年，在老罗锤子手机一路跳票、累不死手机活蹦乱跳、魅族手机版本号即将输给小米、iOS被拍扁、Windows Phone在卖萌、安卓在卖身等诸多鸟事相继雷到众生之后，人们无不感叹，手机这个行业还有救吗？站在智能和愚蠢的十字路口，我们该何去何从？囧rz</p> <p>就在大家迷茫之时，Nokia发布了它的又一力作——1050！整个业界犹如刮来了一股春风，无不感到清新舒畅。大家纷纷感叹，那个曾经的科技巨人就要王者归来鸟！这个夏天，This summer，最受瞩目的大事件，big event！就是：</p> <p><img src="/uploads/2013/06/1458120974.jpg" alt=""></p> <p>Nokia 1050 的发布！！！</p> <p>作为一个反智能化手机操作系统的支持者，我很自豪的宣布，经历了前两轮的预定失败之后，我终于在上周成功订到了这款神机——要不要卖得这么好啊 - -</p> <p>我之前用的手机是<a href="http://baike.baidu.com/view/1969934.htm" target="_blank" rel="noreferrer">Nokia 1202</a>，2008年的神机，其实也不算太老，要不是1050发布，它也其实已经是一个非常现代化、非常新款的愚蠢手机了，无奈在这个1050的时代趋势下也不得不接受停产的命运。</p> <p><img src="/uploads/2013/06/2984211007.jpg" alt=""></p> <p>1050基本上继承了1202所有的成员函数和成员变量，小巧大方，简单易用，低碳环保，超长待机，便宜实惠，这已经足以吊起广大消费者的胃口了。然而真正的1050到底表现如何？它能否在1202的光环之下更进一步再创辉煌？带着这些疑问，记者走访了不少xxx，挖掘出了很多珍贵的xxxx，也听到了各种xxxxxxxx……</p> <p>OK 马上开始</p> <h3 id="目录" tabindex="-1">目录 <a class="header-anchor" href="#目录" aria-label="Permalink to &quot;目录&quot;">&ZeroWidthSpace;</a></h3> <ol> <li>开箱/外观</li> <li>屏幕</li> <li>主界面</li> <li>基本功能 (电话/短信/通讯录)</li> <li>特色功能</li> <li>实用工具</li> <li>性能/续航能力</li> <li>综述</li> </ol>

2013/6/15
阅读更多

秦升拿到红牌之后……

<p><img src="/uploads/2013/06/3893919286.jpg" alt=""></p> <ul> <li>工体上空飘扬着“傻X”的洪亮口号，晚上天津牌照的车又被砸了不少</li> <li>比赛收视率直线下降——比赛才开始了13分钟，还有80分钟呢</li> <li>赞助商的脸全都绿了，下次国足的比赛就没有再打广告了，不过无非是又有别的厂商挨宰了</li> <li>谭晶从此霉运不断</li> <li>看台上两国外交部长正在谈一个上百亿的项目，荷兰大爷若有所思的说：这个我们回去再考虑考虑…… 对面：恩，下次我们还是改一起看乒乓球吧</li> <li>刘建宏紧紧攥着双拳：完了完了，今天这场球大Boss都在看啊，这种球我该肿么说比较得体呢？肿么办肿么办……</li> <li>小区里：还是很安静的，现在大家看球都不是看彩电了，要么是笔记本电脑，不舍得扔下去，要么是大平板电视，扔不动</li> </ul>

2013/6/11
阅读更多

用Sass重新整理自己的博客主题样式

<p><img src="https://sass-lang.com/assets/img/logos/logo-b6e1ef6e.svg" alt="Sass"></p> <p>远远关注<a href="http://sass-lang.com" target="_blank" rel="noreferrer">Sass</a>很久了，今天终于鼓起勇气写了<a href="https://github.com/Jinjiang/jinjiang.github.io/blob/dev/data/themes/iambig-3d/style.sass" target="_blank" rel="noreferrer">我的第一个Sass文件</a></p> <h3 id="sass简介" tabindex="-1">Sass简介 <a class="header-anchor" href="#sass简介" aria-label="Permalink to &quot;Sass简介&quot;">&ZeroWidthSpace;</a></h3> <p>一种CSS的预处理程序，基于Ruby运行。安装过程和相关的准备工作非常简单：</p> <ol start="0"> <li>当然首先要安装<a href="https://www.ruby-lang.org/" target="_blank" rel="noreferrer">Ruby</a></li> <li><code>gem install ruby</code>，必要的环境下需要在命令前加上<code>sudo</code></li> <li>进入我的博客主题文件夹，运行<code>sass-convert style.css style.sass</code>，把我的css文件先转换成sass文件</li> <li>运行<code>sass --watch style.sass:style.css</code>，使得程序自动把<code>style.sass</code>文件接下来的任何改动自动同步转换到<code>style.css</code></li> </ol> <p>这时，新的Sass文件就创建完毕了！^_^ 去碎觉……</p> <p>呵呵，开个玩笑。其实这样的Sass文件虽然格式上没有任何问题，但和直接撰写CSS几乎没区别。而Sass除了可以让我们少写几个花括号和分号之外，其实还有很多实用的特性是我们真正需要的。</p> <p>无论如何，现在的这个Sass文件是一个整理的基础，接下来，我们就来一步一步整理这个文件，同时也一步一步熟悉Sass的特性。</p>

2013/6/5
阅读更多

Connect中间件使用手册

<p>以下内容大多译自<a href="https://www.senchalabs.org/connect/" target="_blank" rel="noreferrer">Connect官网</a> 2013-06-02</p> <p>Connect是基于Node的中间件框架(middleware framework)，提供超过18种官方中间件以及更多的第三方中间件。</p> <p>示例：</p> <pre><code>var app = connect() .use(connect.logger('dev')) .use(connect.static('public')) .use(function(req, res){ res.end('hello world\n'); }) .listen(3000); </code></pre> <p>安装方式：</p> <pre><code>$ npm install connect </code></pre> <p>依次介绍官方中间件</p>

2013/6/2
阅读更多

实践

<p>上周末在图灵的技术沙龙分享了自己Node.JS的一些项目实践心得。</p> <p>Node.JS这东西说起来也是3年前就听说的东西了，最近一段时间才真正拿它做东西。这种感觉既熟悉又陌生，熟悉在听大家谈过无数次，陌生在自己没怎么亲自动过手。这回的一些尝试和项目实践，让我更多的了解了这门技术，也更好的了解了我自己。</p> <p>分享的在线链接在此：<a href="pathname:///slides/node-js-practice" target="_blank" rel="noreferrer">/slides/node-js-practice</a>，这里就不重复其中的内容了。</p> <!-- ![《程序员》201303期封面](http://www.programmer.com.cn/wp-content/uploads/2013/02/QQ截图20130225140912-231x300.jpg) --> <p>我想更多说的是，我们有幸在HTML5快速发展的时代，这里几乎每天都会有新的规范、新的工具、新的库、新的框架、新的理论。玲琅满目，目不暇接。也许我们每天走马灯似的看它们，都不一定看得过来。我感觉自己就长期处于这种状态。可是当这些东西都只是我们眼前的匆匆过客，来不及细细体验、品味其中的内涵，那和从来都没看过相比，有多少实质上的差别呢？</p> <p>我觉得这里有两件事情值得考虑：第一，要再多些时间在新技术的关注和尝试上；第二，有选择性的深入其中。</p> <p>先说第一点，我们不能始终沉醉在对现有技术或业务的娴熟之中，同时要相信技术和产品、设计、市场、商务一样，可以驱动业务的发展和进步。我们唯有带着这样的信念去工作，去和同事交流，去和领导沟通，去在团队里一起探讨问题，才会令自己有这种空间和时间。凡事都有难处，但总要走出这第一步。</p> <p>第二，前端这个词逐渐由html/css/js三门语言和基本ps技巧的集合，变成一个无限宽泛的概念。我们在鼓励全面发展的同时，也不能一把抓，也需要量力而行，循序渐进，找到属于自己的突破口，找到和自身工作最佳的结合点。最关键的是，要有实践的机会。</p> <p>人生有时难免会站在命运的十字路口，左右为难。最后发现，真正让自己踏实下来的，往往是这些真材实料的东西。</p>

2013/5/22
阅读更多

巧用 RequireJS Optimizer 给传统的前端项目打包

<p><a href="https://github.com/jrburke/r.js" target="_blank" rel="noreferrer">r.js</a> 本是 <a href="https://requirejs.org/" target="_blank" rel="noreferrer">RequireJS</a> 的一个附属产品，支持在 NodeJS、Rhino 等环境下运行 <a href="https://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition" target="_blank" rel="noreferrer">AMD</a> 程序，并且其包含了一个名为 RequireJS Optimizer 的工具，可以为项目完成合并脚本等优化操作。</p> <p>r.js 的介绍中明确写道它是 RequireJS 项目的一部分，和 RequireJS 协同工作。但我发现，RequireJS Optimizer 提供了丰富的配置参数，可以让我们完全跳出 AMD 和 RequireJS 程序的束缚，为我们的前端程序服务。</p>

2013/3/30
阅读更多

编辑器小调查结果

<p>我在侧边栏放了一阵子编辑器的小调查，时间过去比较久了，是时候统计一下了，供大家参考：</p> <p>我一共放了5个默认选项，使用情况排名依次是：</p> <ol> <li>SublimeText 2</li> <li>Notepad++</li> <li>Dreamweaver</li> <li>EditPlus</li> <li>Vim</li> </ol> <p><img src="/uploads/2013/02/404926186.png" alt="默认选项的选择情况"></p>

2013/2/17
阅读更多

[译]JSLint 文档

<p><mark>译自：<a href="https://www.jslint.com/lint.html" target="_blank" rel="noreferrer">https://www.jslint.com/lint.html</a></mark></p> <h3 id="什么是jslint" tabindex="-1">什么是<code>JSLint</code>？ <a class="header-anchor" href="#什么是jslint" aria-label="Permalink to &quot;什么是`JSLint`？&quot;">&ZeroWidthSpace;</a></h3> <p><code>JSLint</code> 是一个用来查找各种 JavaScript 程序中的问题的 JavaScript 程序。它是一个代码之类工具。</p> <p>在<a href="http://cm.bell-labs.com/cm/cs/who/dmr/chist.html" target="_blank" rel="noreferrer">早些年</a>的 <a href="http://en.wikipedia.org/wiki/C_programming_language" target="_blank" rel="noreferrer">C 语言</a>中，有些程序的常见错误是主流的编译器无法抓住的。所以出现了一个名叫 <a href="http://en.wikipedia.org/wiki/Lint_programming_tool" target="_blank" rel="noreferrer"><code>lint</code></a> 的附带程序，可以通过搜索源文件寻找错误。</p> <p>随着语言的成熟，其定义的健壮性足以消除一些不安因素，编译器也在问题警告方面越做越好，<code>lint</code> 也不再需要了。</p> <p><a href="http://javascript.crockford.com/" target="_blank" rel="noreferrer">JavaScript</a> 是一个年轻的语言。它原本只是用在网页上完成一些无需劳驾 Java 的小任务。但 JavaScript 是一个强大得惊人的语言，现在它已经在大项目中派上用场了。当项目变得复杂之后，之前从易用角度出发的语言特性就带来了一些麻烦。这是一个为 JavaScript 而生的 <code>lint</code> 呼之欲出：它就是 <code>JSLint</code>，一个检查 JavaScript 语法、判断 JavaScript 语法有效性的工具。</p> <p><code>JSLint</code> 会拿来一段 JavaScript 源代码并对其进行检索。一旦发现问题，它就会返回一则消息，用来描述这个问题以及源代码中的大概位置。发现的问题不一定是，但通常是语法上的错误。<code>JSLint</code> 通过一些代码规范来杜绝结构性的问题。这并不证明你的程序是正确的，只是提供另一种发现问题的眼光。</p> <p><code>JSLint</code> 定义了一个专业的 JavaScript 的子集，它比 <a href="https://www.ecma-international.org/publications/standards/Ecma-262.htm" target="_blank" rel="noreferrer">ECMAScript 标准第三版</a>的定义更严格，和 <a href="http://javascript.crockford.com/code.html" target="_blank" rel="noreferrer">JavaScript 编码规范</a>中的建议相对应。</p> <p>JavaScript 是一个粗中有细的语言，它比你想象中的更好。<code>JSLint</code> 帮助你回避很多问题，在这个更好的语言中撰写程序。<code>JSLint</code> 会拒绝一些浏览器支持的程序，因为浏览器并不关心代码的质量。你应该接受 <code>JSLint</code> 的所有建议。</p> <p><code>JSLint</code> 在 JavaScript 源代码、HTML 源代码、CSS 源代码或 <a href="https://www.json.org/" target="_blank" rel="noreferrer">JSON</a> 文本中都可以运行。</p>

2013/2/17
阅读更多

烟火——写给蛇年的傲游和我

<blockquote> <p>世界上没有怯懦的高楼<br> 没有细水长流的烟火</p> <p>——1976《烟火》</p> </blockquote> <p>看完春晚正准备要睡觉，看到祥子一条微博：<q>八千块的烟火换来一小时的快乐，多少的代价可以换来一生的幸福。</q>于是我就这样陷入了沉思。</p> <p>祥子我恨你……</p> <p>此时此刻，估计整个城市，乃至全中国的“一小时的快乐”，都已经告一段落了。这对我来说，也意味着，去年的成绩、收获、经验教训，也停留在这里了；新年的奋斗史，从这一刻，就要开始书写了。</p> <p>每到过年的时候，也是让我猛一抬头，想起自己和过去的老师同学又多一整年不见的时候，想起自己在傲游又多待了一年的时候，想起自己和一年前相比又度过了一年美好时光的时候。</p> <p><img src="/images/posts/weibo/660d0cdfjw1e1agx3b46nj.jpg" alt=""></p> <p>来傲游第六年了，去年这个时候的<a href="http://bulaoge.net/topic.blg?dmn=g3g4&amp;tid=2324366" target="_blank" rel="noreferrer">五周年纪念的情形</a>仿佛还历历在目。我也在此兑现自己一年前的承诺，给自己在傲游的第六年留个“快照”。</p> <p>现在小学时期的稳定性记录已经被打破了，人生会不会从此变得没有追求了呢？呵呵</p> <p>在我眼里，这一年，自己和公司都发生了很多变化。公司的办公区又一次扩张了，从“两居室小户型”演变成“两套大房子”了；高管走了一批、也来了一批；有些部门拆散了，有些部门合并了，有些部门洗牌了……无非都为的是个活字。我自己呢，团队角色和工作要求也发生了不小的变化，无非为的是能继续走下去。其实这些都不算什么伟大的志向。所以，尽管过程轰轰烈烈，结果其实很惨淡。</p> <p>这和我刚来公司时的感受已经截然不同了。刚来傲游的时候，觉得像天堂一样，哪儿都好，各种优越感，每天无忧无虑，技术交流的时候、同学聚会的时候、校园招聘等各种时候，一说自己是傲游的，大家都好待见你；现如今，觉得公司哪儿都有问题，哪儿都做得不好，哪儿都有改进空间。上周一个好朋友的电脑重装系统了，跟我说他把<code>Program Files/Maxthon</code>整个文件夹都备份了，问我怎么恢复收藏——聊到最后我们两个都很震惊：他震惊自己最信任的傲游浏览器把他的收藏搞丢了，我震惊他不知道我们有傲游账户和在线收藏。</p> <p>烟火固然美丽，但也稍纵即逝。</p> <p>去年年初的时候看到过一句话：“即使如日中天的Apple，也一定会有股票下跌的那一天” (如今它已经跌了)。一家公司再好，一份工作再适合你，也会有不如意的地方。其实问题总是会有的，如果每次面对问题的时候都选择逃避，这个问题不会自动消失，反而会永远缠着你。</p> <p>我觉得去年一年，是我让自己从理想乐观回归现实的一年。从某种角度将，它让我看清傲游是一个有很多问题的公司，同时这些问题也是大家需要很大的勇气去承认、面对和解决的——这其实对于我，以及每一个傲游人来说，其实非常重要。它比我们去年赚了多少钱、发展了多少用户、打开了多大的市场这些成绩，都更重要。</p> <p><img src="/images/posts/weibo/80e3e3d0jw1dyt4cxkk85j.jpg" alt=""></p> <p>所以，做事不能只看眼前成绩，不然什么也做不成。面对问题，不能逃避，只有勇敢面对，久而久之，养成习惯，就可以战胜一切！</p> <p>过去的六年，对我来说，就当是一场烟火表演吧。璀璨、辉煌、这一切的一切，都无法奠定你未来的坦途。幸福的人生，需要的不是一场价值连城的烟火表演，也不是每年一度的烟火表演，而是一个持续的状态，一步一个脚印的存在感和成就感。</p> <p>是时候面对久违的挑战了。</p>

2013/2/10
阅读更多

小秀个人的全年摄影作品 (共15张)

<p>今年年初家里买了台微单相机，外加一台iPhone，我也算是个曾经摸了摸镜头的人。相比起周遭的摄影发烧友，我觉得自己真的很业余，以至于我自己说出摄影作品这个词的时候都有点心虚：不就是拍了几张照片么。还整的跟是回事儿似的。</p> <p>不久之前刚在自己微博上晒了几张自己拍照片时的个人恶趣味，算娱乐一下吧。下面几张是我真的认真挑选过的，如果诸位摄影达人看到觉得拍得太烂，还求轻拍 ^_^</p> <p><img src="/uploads/2013/01/3406089111.jpg" alt="车水马龙"><br>车水马龙</p>

2013/1/4
阅读更多

2012年终毫无正能量的总结

<p>“丰功伟绩”、“甜言蜜语”就不在这里恶心大家了，如果有人问我你幸福吗，我会说我很幸福，以及关于我怎么幸福的长篇大论。但我不会把下面的话也说出来。</p> <p>乱七八糟的2012年就这样糊里糊涂的过去了。</p> <p>今年发生了不少冠冕堂皇的大事儿，但好像没什么实质性的收获。可能此时此刻的我心思还是在事业上多一些，但无奈力不从心。作为一个有家有老婆的人，不能加班，不能熬夜，工作上几乎没了弹性，想冲冲不起来，有劲儿不能一口气使出来；另外我们的休闲娱乐需求也很旺盛，下馆子看电视电影到处旅游总是好的，可它们基本上填满了我的业余时间，没有充足的时间用心学习这种感觉比什么都糟糕。这些事儿其实也不是我改变不了，更多的是自己也不忍心改变吧。</p> <p>我觉得这是我觉得2012糊里糊涂的主要原因。</p> <p>第二点原因是我觉得自己变懒了也变邋遢了。搬了家这么久也结婚了这么久，很多早就想请客的人也一直没请到。每到周末就跟自己怕麻烦的心妥协了。洗碗洗衣服倒洗脚水擦地吃早餐之类的事情也越来越不积极了，我最近反思了一下，可能是太想把烂摊子都寄托给老婆来收拾了，家里的脏活累活总要有人做，己所不欲勿施于人，以后还是身先士卒吧。</p> <p>在工作上，我比较欣慰的是自己有机会也有勇气接触更广泛的技术领域，让自己的知识面更广，更充实，但达到比较理想的状态是需要时间的。为了能够掌握更广泛的开发技能，我正在重读很多计算机的基本课程。在上学的时候它像是我毕业路上的敌人，我在乎的只是战胜那些题目；如今重读，它们更像是我的朋友，为我弥补一块块盲区，让我面对困难的时候更加自信。真的有点二次启蒙的感觉，我突然觉得这才是真正的编程。我希望在新的一年我可以处于一种低调踏实追求卓越的心态，不要像今年这样疯疯癫癫的，说得多做得少。</p> <p>公司这一年的形势很微妙，我觉得全公司现在最纠结的地方在于，我们想做个典型的带有鲜明中国特色的公司，还是一个超凡脱俗的洋气公司。说白了就是一群屌丝和另一群高富帅白富美凑在一起想搞个团队活动，大家一起商量是去吃西餐呢还是吃大排档呢。正在犹豫之时，眼瞅着周围的人眼疾手快，把西餐厅的位子订光了，把大排档也挤了个水泄不通，顿时就都傻眼了，可还是没有相互妥协的迹象。咳，只说这么多了…</p> <p>别的都还行。</p> <p>2013不能比今年更烂了。</p>

2013/1/1
阅读更多

标签？ID？还是CLASS？

<p>想谈一下几个基本的HTML问题，都是围绕着应该怎样使用HTML。</p> <h3 id="_1-多用有语义的标签-少用div和span-避免使用没有class的div和span。" tabindex="-1">1. 多用有语义的标签，少用div和span，避免使用没有class的div和span。 <a class="header-anchor" href="#_1-多用有语义的标签-少用div和span-避免使用没有class的div和span。" aria-label="Permalink to &quot;1. 多用有语义的标签，少用div和span，避免使用没有class的div和span。&quot;">&ZeroWidthSpace;</a></h3> <p>设想一下HTML的世界最初只有div和span这两个标签，其实网页依然可以写得出来。更多标签的出现，其实是为了替代利用率高但不好书写的 <code>&lt;div class=&quot;{tagname}&quot;&gt;</code> 和 <code>&lt;span class=&quot;{tagname}&quot;&gt;</code> 来的。</p> <p>想再接着多说一句的是，在HTML5里越来越多常见的div class组合或div id组合被直接命名为了新的标签。理由也是相同的，像header/footer/aside/nav/section/article都是我之前经常使用的class或id。我甚至觉得w3c创造新html标签的工作很简单，定期统计一下最常用的class和id，然后取前几名作为新的标签名就行了。</p> <p>上周还有人在微博上感慨那个“史上最牛的HTML代码”：</p> <pre><code>&lt;div class=&quot;mod&quot;&gt; &lt;div class=&quot;hd&quot;&gt;&lt;/div&gt; &lt;div class=&quot;bd&quot;&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>再过几年它真的也许会消失的。</p> <p>反过来思考也可以，尽量使用有语义的标签名，实在想不出来合适的标签名了，再用div然后起个class或id。这样的思路也不错。</p> <h3 id="_2-不要滥用class而回避id-该出手时就出手。" tabindex="-1">2. 不要滥用class而回避id，该出手时就出手。 <a class="header-anchor" href="#_2-不要滥用class而回避id-该出手时就出手。" aria-label="Permalink to &quot;2. 不要滥用class而回避id，该出手时就出手。&quot;">&ZeroWidthSpace;</a></h3> <p>和问题1同理，设想一下HTML的世界最初只有class没有id，其实网页依然可以写得出来，语义依然表达得出来。无非就是会出现很多特殊的class呗。因此，我们也很好理解，id的出现，就是可以和class一起协作，使某些语义即使没有现成的标签可以表示它，但依然可以把一般性和唯一性完美的结合在一起。</p> <p>这里驳斥一个观点：“尽量都使用class，因为控制样式的时候class的优先级是同级的，id的优先级更高，它的出现会破坏样式优先级的平衡”。首先我觉得这是一个假命题，所谓的“平衡”是不存在的，也没有必要去刻意维护，通过id来表示的内容一定是相对特殊的，优先级自然高一些，这样的优先级设计是如此的自然。我能够接受的全部是class的适用范围仅是一些底层的css基础样式，如oocss里的基础样式，或很多网站都会有common.css文件或general.css文件，里面的东西尽量用class没问题。</p> <p>另一个更重要的理由是，在HTML5里，除了id和class这两个特性可以控制样式之外，还可以通过特性选择器来定义样式，类似E[attr=&quot;...&quot;]的写法。我们会发现可以控制样式的方式越来越灵活，选择越来越多。这是Web发展的必然趋势。当其他人已经在用id/class/data-*/tagname对样式展开多重维度攻势的时候，我们实在没有必要把自己还关在class的世界里。</p> <h3 id="_3-尽量给每个表示布局的class或id换一个站在内容角度的合理的名字。" tabindex="-1">3. 尽量给每个表示布局的class或id换一个站在内容角度的合理的名字。 <a class="header-anchor" href="#_3-尽量给每个表示布局的class或id换一个站在内容角度的合理的名字。" aria-label="Permalink to &quot;3. 尽量给每个表示布局的class或id换一个站在内容角度的合理的名字。&quot;">&ZeroWidthSpace;</a></h3> <p>比如两列布局的左右侧多半是正文和辅助信息的关系，那么就不建议用class=&quot;left&quot;和class=&quot;right&quot;而是倾向于class=&quot;main-content&quot;和class=&quot;sidebar&quot;，或者直接用article和aside。</p> <p>在自适应Web设计(responsive web design)如火如荼的今天，页面上的某个元素处在网页什么位置更像是个变量，所以通过位置来定义一个元素显然是会承受很多额外的维护成本和扩展成本。当改变发生的那一天，你发现自己的HTML代码变得文不对题。曾经的left跑到最上面去了，right变成了底部通栏，这都是很正常的变化。</p> <p>实在没什么语义的，比如为了给IE加圆角而增设的标签，或清除浮动用的额外的标签，再或者是基础样式的，和具体内容无关的，再用div加表象的class来描述。</p> <h3 id="_4-尽量避免表示纯样式的class或id。" tabindex="-1">4. 尽量避免表示纯样式的class或id。 <a class="header-anchor" href="#_4-尽量避免表示纯样式的class或id。" aria-label="Permalink to &quot;4. 尽量避免表示纯样式的class或id。&quot;">&ZeroWidthSpace;</a></h3> <p>比如class=&quot;f14 red&quot;。印象中网上有很多拙劣的例子，也有很多深刻批判这种用法的文章，我想说的是，如果你非要这样改样式，那不如直接写内联style来得直观。</p> <h3 id="最后想说的是" tabindex="-1">最后想说的是…… <a class="header-anchor" href="#最后想说的是" aria-label="Permalink to &quot;最后想说的是……&quot;">&ZeroWidthSpace;</a></h3> <p>互联网是一个快速发展的领域，<a href="http://it.sohu.com/20110824/n317169919.shtml" target="_blank" rel="noreferrer">它的快速发展甚至让人们忘却了很多传统领域的停滞不前</a>。在这样的领域里工作，勇敢尝试，关注新技术，把握新趋势是如此的重要。不要拒绝新事物，不要被不思进取的人拖累，不要对大千世界失去好奇心和求知欲，方可永葆青春。</p>

2012/11/27
阅读更多

微创新=伪创新

<p>先说一个跟创新无关的事儿： 最近有个刷火车票的插件非常流行，名字我不想提了。朋友发链接给我的时候，我打开一看，吓了一跳，网站风格几乎和傲游2006年的官网一模一样……</p> <p>傲游2006年的官网<br> <img src="/uploads/2012/09/1293548526.png" alt="傲游2006年的官网" /></p> <p>这是今天看到的网页<br> <img src="/uploads/2012/09/4227819619.png" alt="这是今天看到的网页" /></p> <p>这跟创新毫无关系，但和创新的一个反面话题有关——抄袭。虽然公司的设计和创意被别人照搬过去对我这种在傲游有些年头的人已经不是什么新鲜事了，但是在今年的新网站，还能够抄回2006年，好设计在国内死绝了吗？</p> <p>我感觉在我们周围的互联网行业中，创新能力正在急剧群体退化。不论是设计、产品还是技术层面。1.封闭的互联网给山寨版的国外网站带来了__巨大需求__；2.再加上产权保护不给力，让抄袭变成了“<strong>0成本</strong>”。所以抄袭者顺风顺水，不甘心抄的人走起路来就变得相对困难。</p> <p>另外，我不太认同微创新这个说法，原因很简单，__如果微小的不同之处也可以看做是创新，那什么又是真正的抄袭呢？__我们今天认为的抄袭，哪个会像做蜡像一样真的做个一模一样的东西出来呢？所以没什么争议，抄了就是抄了。如果微创新被鼓励，就等于抄袭被鼓励。</p> <p>设计：“直接把傲游的官网样式抓下来用吧”<br> 产品：“我们做的东西很简单，就做成跟xxxx一样”，“然后我们再加个xxx，就行了”</p> <p>我担心在这样的游戏规则之下，人的创新意识和创新能力会在不知不觉中退化。前段时间参加了互联网大会，本来是去给我们CEO捧场的，只听了其中几个专场。直观的感觉是：大家都在讨论别人，上来就说Facebook今年怎么样，Apple今年怎么样，Google今年怎么样，说得不亦乐乎，好像Facebook、Apple、Google是他们自家的公司；一说到自己，就一两句话结束了。听到最后，觉得讲得最有水平的，同时也是中国互联网最有前途的行业，其实是搞数据分析的，因为他们的工作就是名正言顺的研究别人。</p> <p>隔天凌晨，我又见证了苹果iPhone5等一些列产品的发布会。对比甚是明显：</p> <ul> <li><strong>白天的互联网大会上，国内的某些大公司会怎么“做”产品是没悬念的，但大家都在好奇他们接下来会“做”什么产品；</strong></li> <li><strong>晚上的苹果发布会，他们在做什么产品是没悬念的，但大家都在好奇他们接下来会把这款产品做成什么样。</strong></li> </ul> <p>我想这就是对国内互联网怪现象的最好总结了……</p> <p>看过听过经历过后，我更坚定了的是，要拥有一颗强大的内心，面对抄袭，不能妥协，坚持创新的思考和行动。</p>

2012/9/29
阅读更多

HTML5峰会归来

<p>这次 <a href="https://weibo.com/html5dw" target="_blank" rel="noreferrer">@HTML5梦工场</a> 的活动真是太棒了！我们了解企业，了解同行，了解技术，了解趋势，吃喝玩乐，雅俗共赏，天南海北共聚一堂，还有什么活动能跟这样的 <a href="http://2012.html5dw.com/" target="_blank" rel="noreferrer">#html5峰会#</a> 相媲美呢？！虽然2天脚都站酸了，但真心觉得值！</p> <h3 id="了解企业" tabindex="-1">了解企业 <a class="header-anchor" href="#了解企业" aria-label="Permalink to &quot;了解企业&quot;">&ZeroWidthSpace;</a></h3> <p>这次峰会上，诸多企业都在会场搭建了属于自己的展台：有浏览器，有应用平台、有技术图书出版社，这样不够，后台技术来了，电视来了，物联网来了，广告服务来了，这样还不够，更夸张的是眼镜和糕点也来了。其实仔细想想，中间这部分领域是早晚要和HTML5打交道的，而后面这部分呢，也几乎是每一个前端工程师生活的一部分(你看，干这行的视力都不太好，还经常以庆祝xxx为借口买蛋糕吃)。我们了解形形色色的行业和企业，体验工程师生活的每一部分。</p> <p>当然说到企业展台，这也包括我的老东家傲游。今年公司启动了全平台的浏览器研发项目，除了已经有的PC、安卓版本，还陆续发布了Mac、iPad、iPhone版本。所以这次的展台内容很丰富，有些朋友甚至来到展台前把所有的设备都试用一遍，才意尤未尽的离开，这让我们这两天“辛苦站台”的同事们倍感欣慰。</p> <p><img src="/uploads/2012/08/1544819964.jpg" alt="傲游浏览器的展台"></p> <h3 id="了解同行" tabindex="-1">了解同行 <a class="header-anchor" href="#了解同行" aria-label="Permalink to &quot;了解同行&quot;">&ZeroWidthSpace;</a></h3> <p>我想说第二天的HTML5作品展真棒！一口气看58份优秀作品，结识58组前端精英，感受大家的创意和热情！这次给我印象深刻的，有一个是用Canvas写毛笔字的，可以根据书写的速度模拟出毛笔的力道来，非常神奇；还有一个作品用到了最新的摄像头媒介接口，做出了类似Kinect的游戏体验，他们的作者自豪的说：“我们的目标就是秒杀Kinect！”；另外我非常有幸结识到了HTML5图形库<a href="http://www.ichartjs.cn" target="_blank" rel="noreferrer">ichartjs</a>的作者，我觉得他的作品像一阵及时雨，刚好填补了图表制作这个HTML5非常大的领域空白。除此之外的其它作品也都各有千秋，看得出他们呕心沥血的投入和付出。</p> <p><img src="/uploads/2012/08/186888587.png" alt="H5Slides"></p> <p>我也有机会展示了自己参与的一个开源项目：就是<a href="http://h5Slides.com" target="_blank" rel="noreferrer">H5Slides</a>，我们专门为了这次的峰会搭建了一个供大家试用和体验的网站。不少开发者也对我们的作品产生了浓厚的兴趣。还有些人在网上看到过，现场认出我来了，哈哈好害羞滴说！</p>

2012/8/20
阅读更多

分享bookmarklet一则：随意阅读

<p>这款bookmarklet是我对主流阅读模式智能识别规则的一种吐槽。</p> <p>当然，首先，阅读模式本身是一项非常棒的功能！他可以增强文章的阅读体验，统一不同页面的视觉风格。可以让人专注在文章内容中。等等。 而我要吐槽的点，是这个所谓的“智能判断文章内容”的算法。</p> <h3 id="智能分析-的阅读器" tabindex="-1">“智能分析”的阅读器 <a class="header-anchor" href="#智能分析-的阅读器" aria-label="Permalink to &quot;“智能分析”的阅读器&quot;">&ZeroWidthSpace;</a></h3> <p>阅读模式的核心任务之一，就是能够找出我们在各种凌乱广告、装饰物、页眉页脚之中的正文内容。在找内容这件事上，大家不约而同的使用了智能分析的路数。<a href="https://code.google.com/p/arc90labs-readability/source/browse/trunk/js/readability.js" target="_blank" rel="noreferrer">这里</a>是早期开源的Readability脚本库的核心代码，我们可以看到其中包含着大量用来识别某dom结点是否是正文根结点的算法公示。而这套算法，又是从大量已存在的网页中归纳而来的。</p> <p><img src="/uploads/2012/08/3234165205.png" alt="Readability"></p> <h4 id="阻力" tabindex="-1">阻力 <a class="header-anchor" href="#阻力" aria-label="Permalink to &quot;阻力&quot;">&ZeroWidthSpace;</a></h4> <p>既然是归纳的结果，而现如今已存在的网页已经数以亿计五花八门了，那不可避免的会存在判断误差。我们希望把内容识别的准确率提到最高，但会遇到一个问题：就是广告主、站长都有各自的小算盘，他们时刻准备着违背这些智能，降低判别的准确率，不让它正常工作，以谋取自己更高的收益或二次点击率。因此，这一智能的识别规则无法完全公开(Readability随后停止了开放源代码，我猜也有这方面的考量)。</p> <h4 id="how-to-enable" tabindex="-1">how to enable? <a class="header-anchor" href="#how-to-enable" aria-label="Permalink to &quot;how to enable?&quot;">&ZeroWidthSpace;</a></h4> <p>可黑盒的智能规则又导致了另外一个问题：智能识别如果出现判断误差，对于那些希望支持阅读模式的网站，又无奈于找不到这些计算规则去适配。于是我们又会看到类似“<a href="https://www.google.com/search?q=how-to-enable-safari-reader" target="_blank" rel="noreferrer">how to enable safari reader</a>”这样的问题满天飞。</p> <p><img src="/uploads/2012/08/938520538.png" alt="Google搜索截图：如何激活阅读模式"></p> <p>最后阅读模式的识别规则、支持者、反对者扭打在了一起。</p>

2012/8/20
阅读更多

国际羽联和中国队之间的恶性循环

<p>直观的感觉是这次“冷”敦奥运会上，国际上对中国集体发难。这样的感觉起码有这些因素作祟：第一，自从北京奥运会中国在家门口历史上首次拿到金牌第一，国际媒体就开始越来越关注中国；第二，以前我们都陶醉在某些洗脑工具中，听不到国外的声音；第三，称赞中国的声音不够劲爆，我们的舆论也有选择性的把更多偏激的言论带回了国内；第四，新媒体全面占领传统媒体，消息更快速，也更不准确；第五，我们喜欢“拿来”，却不喜欢回馈。</p> <img src="/uploads/2012/08/1497762744.jpg" alt="144261153.jpg" /> 图片来自和讯新闻 <p>话说这次奥运会4对羽毛球选手被判消极比赛取消资格一事，绝对是国际羽联对中国长期以来忍无可忍的一次报复。毫无疑问中国现在在羽毛球这个项目上太过强大，尤其是女双，强大到对手连打败你的信心都没有了。这样的话选手的成绩在淘汰赛制中变得偶然性很大：第一轮就碰中国，名次肯定倒数，晚点碰中国，甚至可以拿奖牌。</p> <p>我猜国际羽联把羽毛球由纯淘汰赛改成循环赛加淘汰赛，这也直接导致了这一出闹剧的出现。其实规则的改变就是给那些名次不好的人更多机会，给中国队更多危险。<strong>但我不认为这是一种良性的改变</strong>。</p>

2012/8/5
阅读更多

ZeroClipboard 学习笔记

<p>如题，周末抽空学习了一下。</p> <p><a href="https://github.com/jonrohan/ZeroClipboard/" target="_blank" rel="noreferrer">ZeroClipboard</a>是在桌面电脑的浏览器上，通过flash技术实现“复制到剪切板”功能的一个程序。它的好处是可以兼容所有浏览器，完成剪切板的操作。</p> <p>我们在使用的时候主要就用到两个文件：一个是js文件<code>ZeroClipboard.js</code>，用来引用在网页中；另一个则是swf文件<code>ZeroClipboard.swf</code>，它无需我们在代码里引用，而是被之前的那个<code>ZeroClipboard.js</code>二次调用的。</p> <p>ZeroClipboard的工作原理大概是，在网页的“复制”按钮上层遮罩一个透明的flash，这个flash在被点击之后，会调用其的剪切板处理功能，完成对特定文本的复制。这里有几件事需要我们来完成：</p> <ol> <li>创建一个透明的flash</li> <li>将这个flash浮在按钮上层</li> <li>确定要复制的文本是什么</li> <li>监听这个透明flash的鼠标点击事件</li> <li>该flash被点击之后，完成剪切板处理</li> </ol> <p>对于这几件事，ZeroClipboard分别提供了不同的api，来完成整个需求。</p>

2012/7/29
阅读更多

“思考人生”

<p>前几天欧洲杯，“巴神”巴洛特利一个散步式单刀被后卫回追成功，解说员戏称他停下来思考人生了，一时间“思考人生”变成了个热门词，以至于我们看到谁发呆、低头，都说他们在“思考人生”。其实我最近也在思考人生，也许比他们的严肃一些了。</p> <p><img src="/uploads/2012/06/1876065904.png" alt=""></p> <p>来北京的第6年，同时也是在傲游的第6年，一转眼小半年快过去了。</p> <p>这半年过得算是波澜不惊吧，事情异常多，公司的，家里的，亲戚朋友的，各种活动的，还狗屎运<a href="https://www.w3.org/QA/2012/06/interview_huawei_maxthon_qihoo.html" target="_blank" rel="noreferrer">出了一趟国</a>。总会有些事情照顾不周，处理不妥，也在意料之中。我只想说：感谢经历，你就自己想办法挺过去吧。</p> <p>在这不到6年的时间里，我一直没有停止做一件事，就是不断努力发现自己的问题和不足，并尝试改变它——相信很多人也都会这样。这期间有些改变是令我兴奋的；有些事情是立竿见影的，富有成就感的；还有很多事情，在潜移默化的发生着，你无法通过一两件事情看清楚，但经过长时间的积累，暮然回首，你会发现，它真的变了，有好的也有不好的。</p>

2012/6/15
阅读更多

听杨东杰弹吉他

<p>这是一个灰常活泼并且有怀旧感的标题。</p> <p>原本打算记我上周末成都之行的一篇日志，我觉得除了参加HTML5梦工厂成都站的技术交流活动之外，最大的收获，莫过于同杨东杰童鞋的畅谈。另外今天连续在微博上看了两个罗纳尔多和萨内蒂年轻时候的足球集锦，突然觉得这几年间，很多事情在发生着悄然的改变，比如曾经有个美少女组合叫S.H.E，昨天在地铁外看到Ella的一个活动海报，才发觉，这个团早已淡出了我们的视野。我们上大学的时候，有几个舍友特别喜欢挺S.H.E，导致我也比较熟悉他们的歌曲，后来让我对他们真正产生印象的是《Play》那张专辑，觉得它的概念蛮有意思的，整张唱片都是轻松欢快的气氛。于是《听袁惟仁弹吉他》这首歌一闪而过，于是就有了这个标题……</p> <p>有点扯远了</p>

2012/5/26
阅读更多

学习精髓

<p>首先，很久没写blog了，最近小忙，今天下午难得清闲，把最近的一些思考写下来。</p> <p>如何学习XXX？是一个在我周围经常听到和谈论的话题。</p> <p>比如，如何学习JavaScript，如何学习HTML5，如何学习移动开发。我发现，在这个知识爆炸的年代，人们汲取知识的方式确实非常多元化，有人选择看书，有人选择上课，有人选择实践，有人选择逛微博，有人喜欢订阅RSS，有人喜欢跟牛人交流。。。</p> <p>从形式上看，他们都各有优劣，我也确实觉得因人而异，因需求而定。同时，学习的内容非常关键，学习的态度也非常关键。</p> <p>首先，我觉得最正统的学习，自然是边看书，边实践，理论与实际相结合的。书，最好是比较系统的，优质的，经得起推敲和实践考验的；实践，最好是简明的，直观的，循序渐进的。</p> <p>但这样的学习，要想保证效果，势必需要一些整块的时间和精力，需要耐心和专注：这似乎在大学毕业之后，就比较难了。</p> <p>我们在高节奏的IT生活中，似乎很难沉住气，于是我们见到了更多“入门级”或“速成”的学习内容，不求深度和广度，但求迅速上手，迈出第一步。再往后，或许生活节奏更快了，人们压力也更大，似乎“速成”都不够快了，人们把之前一本书的东西，浓缩成了一篇文章。。。然后，抽象成“十大要点”。。。最后，变成了一条微博。。。</p> <p>请允许我以这样的方式归纳如今主流的学习方法吧。尽管并不完备。</p> <p>我记得自己在Web标准化交流会，被裕波第一次建议分享的技术话题，就是<a href="https://www.slideshare.net/jinjiang/learning-javascript" target="_blank" rel="noreferrer">《前端工程师如何学习JavaScript》</a>，那会儿我的想法是，要因人而异，选择不同的内容和方式，大块的新东西，要“啃骨头”，沉住气，要不得半点马虎；已经有一定基础的情况下，可以选择“吃零食”，日积月累，汇流成河。今天看来，我依然是这么想的，但如果方法不对，会很痛苦，或事倍功半，或无法坚持。</p> <p>而学习的另一个要素，则是内容。有的时候，跟同行朋友交流时，会遇到这类的讨论：我记得好像有人说过这样是不行的（不好的）、XXX（某名人或某本书）说这样是最好的方案。可有的时候，这些观点并不绝对，它可能是片面的，或是过时的，甚至是复述的人记错了理解错了，甚至它本来就是错的。当这样的讨论频繁出现时，我觉得出了问题：首先，他们在学习知识的时候，没有足够的基础，导致无法辨别上层知识的真伪；二来，对知识的学习缺乏深究的精神，知其然不知其所以然；第三，没有找到真正的起点。</p> <p>导致这些问题的因素可能是多方面的，比如很多基础的材料是英文的，而语言障碍多多少少客观存在；比如我们的视野总是有限的，比如周围的人都是“那样”学来的。可真正的精髓，就这样被错过了，实在可惜。</p> <p>作为比较普世的道理，我觉得有几件事值得我们参考：</p> <p>首先，要追根溯源，我想得到的途径有三种，看官方文档，读源码，拜读技术发明人或创始人的书籍，这些都是原汁原味的，不经其他人转述，没有信息偏移和衰减的（说道这里，大家应该见人玩过那种“传声筒”的游戏吧，一句话经过五个人传到最后，变成了完全不同的另一个意思，就是这个信息偏移和信息衰减的道理）。</p> <p>然后，开放自己的心态，多多参与更广泛交流，避免被狭隘和片面的观点所误导，关于这一点，国内有好多线上线下的技术交流活动，如果大家有心参与，应该足够了（不过，虽然不太严重，但值得指出的是，国内和国际的技术认知还是会有些许偏差，必要的情况下，要走出国门，做跨国交流）。</p> <p>所以，还有第三点，英文太TM重要了！而且是基础中的基础！</p> <p>有了基础，了解了本源，开阔了视野，然后再不断积累零散琐碎的知识，此乃成才成功之道。我们能有多大作为，一个重要方面，取决于我们做了多少准备，下了多少功夫。</p> <p>再说得远一点，技术立本的公司的发展和生存，也需要紧跟趋势，深刻理解行业标准和规范，才有可能真正做到技术领先，甚至技术超前，引领行业趋势和行业标准。</p> <p>以此作为2年前“如何学习JavaScript”话题的延伸和二次思考。</p>

2012/5/21
阅读更多

网站装修笔记20120426

<p>按照严计划，给我的网站加上了投票功能。他已经出现在了网站的侧边栏中。当然在<a href="/blog/website-building-diary-20120406.html">某些media queries</a>条件下，这些内容不在侧边，而在网页的最下面。</p> <p>这从没有花太多时间在编码上。我直接引入了三方的问卷调查工具：<a href="http://wufoo.com/" target="_blank" rel="noreferrer">Wufoo</a>。等于嵌入了一个iframe。我会定期更换这里的投票内容，有些投票可能是为了我更了解大家，更好的优化我的网站为大家服务的，我会根据大家的反馈默默做出改变；而方便公开的统计数据和分析结果，我也会公布在这里跟大家分享。</p> <p>第一期的投票内容比较“肤浅” 囧</p> <p><img src="/uploads/2012/04/4080396881.png" alt="您觉得现在囧克斯的皮肤好看吗？"></p> <p>在添加投票功能的时候，我注意到Typecho的一个不足，就是在创建新的侧边栏面板的时候，不免需要修改主题模板的sidebar.php文件，因为Typecho本身并没有给侧边栏预留插件接口，所以不可以生成自定义的侧边栏面板。我觉得改进的方式可以是这样的：</p> <ol> <li>创建新的配置项，注明要显示的侧边栏面板和排序；</li> <li>同时封装面板的html结构，不允许自定义面板结构，只允许自定义内容；</li> <li>然后在Plugin一边加入自定义面板的接口。</li> </ol> <p>这样主题模板和插件就进一步解耦，开发者就可以在不改动主题模板的情况下调整侧边栏的内容了。</p> <p>一点个人心得，不知Typecho是否愿意接纳这个意见。</p> <p>以上</p>

2012/4/26
阅读更多

网站装修笔记20120414

<p>这周主要把我的几个HTML5幻灯片做了一下整理，在<a href="/all-slides/">这里</a>。从这次播放器的实现上看，幻灯片数据的结构约定有所改变，同时适配了更多的浏览器和设备。</p> <p><img src="/uploads/2012/04/694138118.png" alt=""></p> <p>在这个过程中，我也尝试了更多CSS3的变换效果，让幻灯演示多一点精彩，所以最终我为每个幻灯演示分别使用了不同的幻灯片切换动画。有3d的、有2d的，也有WP7中的Metro风格动画等等。</p> <p>另外说到幻灯演示，我正在发起一个这方面的开源项目(估计经常关注我的朋友都已经听腻了)，本月之内会启动。</p> <p>接下来我想给网站做一个投票系统，放在侧边栏。</p>

2012/4/14
阅读更多

网站装修笔记20120406

<p>今天为我的新网站做了两件事情：</p> <ul> <li>第一件事是为我的主题皮肤加入了侧边栏显示，并使用了css3 media queries技术进行了响应式设计，并借鉴了一些metro ui的思路</li> <li>第二件事是加入了友情链接插件，可以在侧边栏显示一些自定义的链接，方便将来和博友们交换链接</li> </ul> <h3 id="友情链接" tabindex="-1">友情链接 <a class="header-anchor" href="#友情链接" aria-label="Permalink to &quot;友情链接&quot;">&ZeroWidthSpace;</a></h3> <p>先说友情链接插件的事情吧，我在Typecho的插件站找到了一款友情链接的插件，名字就叫<a href="http://typecho.us/plugins/links-for-imhan.html" target="_blank" rel="noreferrer">Links</a>，非常方便实用。我现在随便放了3个链接，看看样子。大家希望跟我交换链接的，可暂时留言至此，回头我会另外做个交换链接的页面。</p> <p><img src="/uploads/2012/04/2077996433.png" alt="友情链接示意图"></p> <h3 id="响应式侧边栏" tabindex="-1">响应式侧边栏 <a class="header-anchor" href="#响应式侧边栏" aria-label="Permalink to &quot;响应式侧边栏&quot;">&ZeroWidthSpace;</a></h3> <p>然后是侧边栏，我把最近文章和最近评论两个侧边栏的widget加入了名为<code>large</code>的css class。这类widget会在条件允许的情况下占用更大的空间。一般情况下宽度是普通widget的两倍。在一些特殊的界面宽度下，widget的宽度是一样的，大家没有什么分别。</p> <p>对于css3 media queries的利用，我这里按窗口宽度分了5档1400px+/1050px+/650px+/400px+/400px-，进行响应式设计。每一档的内容宽度、侧边栏宽度和布局都不太一样。以适应不同的终端。举其中一个例子(1050px~1400px之间)：</p> <pre><code>@media all and (min-width: 1050px) and (max-width: 1400px) { #wrapper { position: relative; padding-right: 280px; } #sidebar { position: absolute; width: 260px; top: 160px; right: 0; } #sidebar .widget, #sidebar .large { width: 98%; } } </code></pre> <p>最终效果如图：</p> <p><img src="/uploads/2012/04/394641605.jpg" alt="响应式设计预览"></p> <p>这款皮肤我会稍后更新共享在这里。</p> <p>另外我最近抽空研究过了SAE Storage，接下来的事情是做一些有趣的侧边栏小控件出来，比如投票、相册、之类的。</p> <p>先记下这么多</p>

2012/4/6
阅读更多

分享Typecho插件：百度统计助手

<ol> <li>百度统计助手</li> <li>只支持http协议，不支持https协议</li> <li>在插件的“设置”里把统计代码最后的那串随机码填入保存即可</li> <li>如果不开启统计，把填入的随机码清空即可</li> <li>设置成功后页脚会多出一个百度的小图标</li> </ol> <h3 id="使用步骤" tabindex="-1">使用步骤 <a class="header-anchor" href="#使用步骤" aria-label="Permalink to &quot;使用步骤&quot;">&ZeroWidthSpace;</a></h3> <p>首先我们当然需要有一个百度统计的账号，然后通过这个账号生成我们要统计的统计代码(如下图)：</p> <p><img src="/uploads/2012/04/2240219894.png" alt="获取百度统计代码"></p> <p>其中有一串随机码，我们把这串随机码记下来。值得注意的是，随机码前面有一个转意后的问号(<code>%3F</code>)，不要把这几个字符算入随机码。</p> <p>然后在插件设置中填入这串随机码(如下图)，即可正常工作。</p> <p><img src="/uploads/2012/04/1123693821.png" alt="插件配置界面"></p> <p>有需要的童鞋可以移步到这里<a href="/uploads/2012/04/1884967606.zip">下载</a></p>

2012/4/3
阅读更多

我的得奖感言

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2012/4/1
阅读更多

网站装修笔记20120331

<p>今天给我的网站加入了著名的百度统计。对，就是下面这个东西：</p> <p><img src="/uploads/2012/03/213230993.png" alt="页脚的百度统计"></p> <p>相信这个小家伙会帮我更加了解我的网站的读者。<br> 虽然就是嵌入了一段脚本，不过幕后的工作不止于此。我在此做个备忘：</p> <ol> <li>更深入的了解了一下Typecho的插件机制，经过群友的提醒，才发现Typecho源码中有一组辅助插件开发的代码，它们被汇总放在了<code>/var/Helper.php</code>中。也弄清楚了Typecho中的Widget机制和命名规律。这让我决定通过插件的方式加入百度统计。</li> <li>我不在主题<code>footer.php</code>中直接加入百度统计，还有一层原因，就是为了保持主题的纯净，让主题可以被其他人也使用同时不被百度统计在内。</li> <li>通过插件加入百度统计之后，我又想到，可否让这个插件也分享给更多的百度统计的使用者。而不同的使用者，统计码都是不同的，这就需要我们把统计码做成一个插件的参数，而不是写死在插件里。于是又了解了一下插件的参数设置方式，把统计码做成了插件的参数。</li> <li>最后，我同时研究了一些Typecho的路由机制(Routing)和SAE的Storage服务接口，这为我给我的网站加入更多的单元或板块提供了更多想象空间。</li> </ol> <p>接下来的计划是把这个插件分享出来，然后重新梳理并设计一下网站的路由规则。</p> <p>以上</p>

2012/3/31
阅读更多

用CSS3制作尖角标签按钮样式

<p>演示地址：<a href="https://jiongks.name/demos/css3-tag/" target="_blank" rel="noreferrer">https://jiongks.name/demos/css3-tag/</a></p> <p><img src="/uploads/2012/03/527861101.png" alt="CSS 3 tag demo"></p> <p>如图的效果。标签有背景色，且左侧有一个三角形，三角形中间有个白色的圆圈。</p> <ul> <li> <p>你一定在想这个效果是背景图切出来的吧——答案是没有用到任何图片</p> </li> <li> <p>那你会不会在想这个效果的html结构很复杂呢——答案是最简单的html结构</p> <p>&lt;p&gt;<br> &lt;a href=&quot;#&quot;&gt;Tag1&lt;/a&gt;<br> &lt;a href=&quot;#&quot;&gt;Tag2&lt;/a&gt;<br> &lt;a href=&quot;#&quot;&gt;Tag3&lt;/a&gt;<br> &lt;a href=&quot;#&quot;&gt;Tag4&lt;/a&gt;<br> &lt;a href=&quot;#&quot;&gt;Tag5&lt;/a&gt;<br> &lt;/p&gt;</p> </li> </ul> <p>之所以可以达到这样的效果，是因为我们运用了一些比较巧妙的技术。接下来告诉你实现方式：</p>

2012/3/30
阅读更多

分享Typecho插件：Markdown 解析器 + 编辑器

<ol start="0"> <li>该插件是在 明城 的“使用 Markdown 解析器”的基础上完善的。</li> <li>使用 <a href="http://daringfireball.net/projects/markdown/" target="_blank">Markdown 语法</a> 编写和发布文章。</li> <li>在正文上方加入了简单的格式按钮；</li> <li>tab键自动输入4个空格；</li> <li>正文下方加入了预览功能；</li> <li>在侧边栏加入了语法提示。</li> </ol> <p>下面是三张截图，一个是工具栏，一个是预览区域，一个是语法提示区域</p> <p><img src="/uploads/2012/03/42147765.png" alt="工具栏"></p> <p><img src="/uploads/2012/03/2658819400.png" alt="预览"></p> <p><img src="/uploads/2012/03/2920005189.png" alt="语法"></p> <p>有需要的童鞋可以移步到这里<a href="/uploads/2012/03/1219206788.zip">下载</a>，但__特别注意__：一定要放在<code>/usr/plugins/Markdown</code>文件夹下，其它命名可能会导致500错误(感谢大家的反馈，我之前没有注意到这个细节)。</p>

2012/3/28
阅读更多

分享Typecho皮肤：我的字很大

<p><img src="/uploads/2012/03/1377949152.png" alt="截图"></p> <p>没错，就是前面提到过的字很大的皮肤，我给这款皮肤起了个非常土的名字叫：“<strong>我的字很大</strong>”</p> <p>有几点说明：</p> <ol> <li>侧边栏我隐藏掉了，并没有预留合适的位置，因为希望界面简介</li> <li>搜索栏我隐藏掉了，但预留了位置，就是右上角，在<code>style.css</code>文件里去掉<code>#search {display: none;}</code>那一段就好</li> <li>右下角的文字算是版权信息，是通过创建body的一个css伪元素实现的，略有一些技巧，如果大家觉得碍事，当然可以在css文件中去掉</li> <li>对IE6效果做了简单的降级</li> </ol> <p>有需要的童鞋可以移步到这里<a href="/uploads/2012/03/3450849969.zip">下载</a></p>

2012/3/28
阅读更多

汇总自己过去的一些HTML5科普文章

<p>新网站开张总得找点东西充数，刚好我这阵子集中看了一些w3c关于html5的文档，所以顺道把之前看过的东西汇总了一下。这些内容如果今后继续有积累的话，还会保持更新。</p> <p><em>另外诸位对哪些html5新特性有科普需求的，不妨留言在下面，我会尽力而为 😃</em></p> <p>目前这些内容的最近更新时间是2012年3月</p>

2012/3/25
阅读更多

html5中的消息通信简介 + 我的新网站开张

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2012/3/23
阅读更多

网站装修计划

<p>写给自己的网站装修计划。</p> <p>首先，选个现成的程序。这个已经选好了，就是Typecho了。</p> <p>然后，给这个程序做个皮肤，经过了前后设计三个版本之后，我觉得现在这个看着靠谱一些。为了避免以后换了别的皮肤。在此截图留念<br> <img src="/uploads/2012/03/1377949152.png" alt="屏幕快照 2012-03-23 下午10.32.30.png"></p> <p>然后，把我之前分享过的一些demo、ppt等内容汇聚过来。现在基本都照原样拿过来了。不过我觉得还不够，因为之前的幻灯片都是针对webkit设计和开发的，另外url规则还是不够简单明了。回头要做的事情是：把url规则弄得更简单、兼容更多的浏览器。</p> <p>然后，了解一些SEO和网站统计的知识，在这里做点尝试，也让自己更认识我的读者。(说实话我在启动这个网站的时候，并不太清楚我的读者是哪些人，喜欢什么，突然觉得这个重要)</p> <p>然后，我希望尝试着放一些照片的展示。其实现在即将是视频时代了，拍照上传微博这种事情都快out了。不过我还是想跟风一把，试试看，放一些自己的想法在里面。</p> <p>然后，我还希望尝试着做一些后台开发的学习和分享。这也是我转向sae的原因。最开始写博客的时候，我只是奢望一个能够直接写html代码的博客，给文章里做点样式和特效；到后来，我找到了github，通过gh-pages放静态页面；现在，我想通过sae写写php神马的。</p> <p>以上是我近期的计划</p>

2012/3/23
阅读更多

Typed Arrays 是神马？

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2012/3/19
阅读更多

Hello World

<p>这里就是我囧克斯的新家了，先囧一个：</p> <pre><code>╔囧╗╔囧╝╚囧╝╚囧╗ ╔囧╗╔囧╝╚囧╝╚囧╗ ╔囧╗╔囧╝╚囧╝╚囧╗ ╔囧╗╔囧╝╚囧╝╚囧╗ </code></pre>

2012/3/17
阅读更多

文明看球

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2012/3/12
阅读更多

HTML5中的文件处理 之 File Writer API

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2012/3/6
阅读更多

HTML5中的文件处理 之 File API

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2012/2/22
阅读更多

独生子女、互相等和不耐烦

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2012/2/20
阅读更多

IndexedDB技术简介(四)

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2012/2/14
阅读更多

IndexedDB技术简介(三)

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2012/2/13
阅读更多

IndexedDB技术简介(二)

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2012/2/8
阅读更多

IndexedDB技术简介(一)

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2012/2/7
阅读更多

把博客的字体进一步调大，同时去掉了侧边栏

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2012/1/31
阅读更多

“模仿别人是为了找到自己”

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2012/1/27
阅读更多

写给我未婚妻的2011年

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2012/1/26
阅读更多

写给自己的2011年

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2012/1/22
阅读更多

手把手教你入门EaselJS做HTML5动画

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2012/1/21
阅读更多

“吃了吧，不吃就浪费了”

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2012/1/15
阅读更多

写给傲游的2011年

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2012/1/14
阅读更多

所谓专业

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2012/1/10
阅读更多

写给HTML5的2011年

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2012/1/8
阅读更多

对HTML5中LocalStorage的一些使用建议

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2012/1/4
阅读更多

回味一下我2011年看到的最过瘾的5场足球比赛

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2012/1/1
阅读更多

浅浅浅谈开饭店被顾客吃出“异物”的用户体验

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/12/28
阅读更多

前端的本职

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/11/28
阅读更多

继续对Mac穷追猛打 之 修改原生按钮文字大小的技巧

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/11/17
阅读更多

WebApp时代的界面布局浅析(我在WebReBuild.ORG第五届年会北京站上的主题分享)

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/11/15
阅读更多

给我的博客换了几个Mac字体

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/11/14
阅读更多

今天又被chrome给伤了

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/11/10
阅读更多

搬家了！介绍一下我的新屋子 ^_^

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/10/31
阅读更多

记实践 CSS 3 中几个 background-* 属性时的陷阱一则

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/10/27
阅读更多

做一个长期规划究竟有多难？——看国足失利之后有感而发

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/10/11
阅读更多

记上周末的HTML5 Code Jam活动

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/9/20
阅读更多

BUILD Win8 发布大会观后感

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/9/16
阅读更多

这里是BTV体有木有！！

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/9/9
阅读更多

传统、现代与后现代

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/7/25
阅读更多

Happy Elements 工程师大会归来，以及一些个人感触

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/7/20
阅读更多

HTML5的视觉方案及其技术简介(下)

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/7/17
阅读更多

HTML5的视觉方案及其技术简介(上)

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/7/17
阅读更多

git和github简介(下)

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/6/26
阅读更多

git和github简介(上)

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/6/26
阅读更多

记乐队在 HTML5 in China 大会上的首演

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/6/11
阅读更多

我们每个人都有义务让这个世界清静一点

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/5/26
阅读更多

@自己

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/5/23
阅读更多

如何制作简易的HTML5幻灯片

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/5/21
阅读更多

对《科普几个傲游浏览器的小知识》一文的补充

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/5/2
阅读更多

“作为一名前端开发者，傲游浏览器适合我吗？”——科普几个傲游浏览器的小知识

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/4/26
阅读更多

#拥抱html5# 技术大会归来

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/4/21
阅读更多

重装系统或MySQL程序之后，如何恢复使用旧文件数据

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/4/11
阅读更多

港澳印象

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/4/7
阅读更多

CSS 3 中的 Transition 用法

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/3/22
阅读更多

记解答QQ群里的一个JavaScript问题

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/3/13
阅读更多

北京交通伤不起啊！北京交通大学也伤不起！

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/3/12
阅读更多

CSS 中的颜色属性 color 知多少？

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/3/9
阅读更多

关于前后端开发协作的思考

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/3/8
阅读更多

帮助大家理解贝赛尔曲线(Bézier curve)

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/2/23
阅读更多

CSS 3 中的 Transform 用法，含Matrix(注意：不是黑客帝国里的变形金刚……囧)

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/2/22
阅读更多

CSS 3 中的圆角边框 border-radius 知多少？

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/2/15
阅读更多

成人世界

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/2/7
阅读更多

浅浅浅谈2011春节联欢晚会的用户体验

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/2/5
阅读更多

发现一则春晚小品的惊“天”规律

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/2/3
阅读更多

呼唤简洁！

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/2/1
阅读更多

我们该如何在工作时，将HTML 5/CSS 3这些新特性引入我们的Web产品之中呢？

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/1/27
阅读更多

前端开发越来越需要对数据敏感的工程师了

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/1/16
阅读更多

科普：如何运用OPML格式向阅读器导入RSS列表

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/1/9
阅读更多

哇！互联网改变生活

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2011/1/2
阅读更多

我和jQuery作者John的合影

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2010/11/24
阅读更多

何以解忧，唯有架构

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2010/11/21
阅读更多

兼容ie6，是一个创造价值的过程

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2010/11/14
阅读更多

咱今天也来玩玩用户体验

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2010/11/13
阅读更多

HTML 5 翻来覆去也就这么多东西了

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2010/11/1
阅读更多

为web sql database默哀！

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2010/10/26
阅读更多

前端开发需要一个纯粹的html5世界，更需要一个传统程序员的眼界

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2010/9/11
阅读更多

!important到底有多important！

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2010/8/11
阅读更多

补充几个学习Javascript的想法

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2010/8/7
阅读更多

终于把蒋定宇分享的modev代码跑通了！

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2010/8/1
阅读更多

好多东西要学啊！加油啦！

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2010/7/24
阅读更多

实践出真知！——趁热把今天的webrebuild与会心得分享出来

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2010/7/17
阅读更多

世界杯结束了，我也好久没扯淡了

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2010/7/15
阅读更多

Web标准化交流会归来：分享一些自己深入理解的“设计模式”

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2010/6/3
阅读更多

浏览器、词典、输入法，一个也不能少

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2010/5/8
阅读更多

快给你的钱包洗洗澡吧~

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2010/5/2
阅读更多

IE 9 来势汹汹

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2010/4/30
阅读更多

裸奔啦~ 裸奔啦~

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2010/4/9
阅读更多

孔子说过：一定要把中国的前端开发搞好！

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2010/3/28
阅读更多

不以己喜，不以物悲

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2010/2/19
阅读更多

中国足球 真不容易

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2010/2/13
阅读更多

Javascript语言特性学习笔记(二)

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2010/1/20
阅读更多

D2前端技术论坛归来有一阵子了

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2010/1/8
阅读更多

JS 对 XML 文件与 XML 字符串的解析

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2009/12/29
阅读更多

分享一些最近看到的技术好文

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2009/11/16
阅读更多

Ubuntu 910 was Amazing!

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2009/10/31
阅读更多

关于软件流程的三个思考

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2009/10/19
阅读更多

聊天室似乎没有想象中那么难做

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2009/10/18
阅读更多

有一种曲折式的发展，叫穷折腾

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2009/10/17
阅读更多

浅浅浅谈国庆阅兵和谋导晚会编排和转播上的用户体验

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2009/10/5
阅读更多

迭戈·弗兰简单的几句话打动了我

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2009/10/2
阅读更多

继续研究 Aero 特效在 WPF 下的扩展

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2009/9/27
阅读更多

浅浅浅谈将 Aero 特效应用到整个窗体

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2009/9/26
阅读更多

有图有真相之二：意大利超级杯归来

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2009/8/23
阅读更多

有图有真相：我有帅啊我有车~

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2009/7/28
阅读更多

入手新手机一部

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2009/7/23
阅读更多

日全食有什么稀罕的，我们身边全食众多

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2009/7/21
阅读更多

浅浅浅谈公共厕所的用户体验设计

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2009/7/20
阅读更多

php 中的 json

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2009/7/17
阅读更多

关于 html dom table 的相关操作

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2009/7/13
阅读更多

介绍我自己

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2009/7/11
阅读更多

穿墙看 YouTube 也是一种 Rock'N Roll 的 Style！

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2009/7/3
阅读更多

防止页面被 iframe 内脚本“打散”的两种方法

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2009/6/23
阅读更多

其实我不懂 Javascript

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2009/6/14
阅读更多

夏天来了

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2009/6/13
阅读更多

PHP+MySQL 学习心得

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2009/5/18
阅读更多

失去信仰是一件很可怕的事情

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2009/5/8
阅读更多

“谢谢你的参与”

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2009/5/5
阅读更多

有一种动弹不得的感觉

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2009/5/4
阅读更多

青春，就是……

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2009/4/23
阅读更多

推荐一个 Javascript 监听输入框改动事件的实现方案

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2009/4/21
阅读更多

令人荡气回肠的切尔西·斯坦福桥

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2009/4/15
阅读更多

我已经离不开了一个名叫博客的东西

<p><mark>本文摘自 勾三股四 更早时期的 <a href="http://bulaoge.net/?g3g4">不老歌</a> 博客。</mark></p>

2009/4/13
阅读更多